Retrieve the value from three selects

I'm new on AngularJS, and I've been integrating a php application with angular. Recently i am trying to get the values from three selects.

I made two files on the plunker editor as example http://plnkr.co/edit/CA2D5RDvZeBQLnMUXFOH?p=preview

The selects are as follow:

<body ng-app="MyForm">

<!-- comment -->
        <div ng-controller="programsController">
        <select name="program" id="program" ng-model="program"
        ng-options="prog.name for prog in programs">
        </select>
        program.name {{program.name}}
        selected_program {{selected_program}}
        </div>

<!-- comment -->
        <div ng-controller="periodsController">
        <select name="period" id="period" ng-model="period"
        ng-options="period.name for period in periods">
        </select>
        </div>

<!-- comment -->
        <div ng-controller="teacherController">
        <select name="teacher" id="teacher" ng-model="teacher"
        ng-options="teacher.name for teacher in teachers">
        </select>
        </div>

        <button ng-click="vals()">Click</button>

    </div>

MyForm is the main module of the application

angular.module('MyForm',['Programs','Periods','Teachers'])
.factory('myFactory', function() {
    console.log('Factory loaded');
    var course = {
        program : 'no set',
        setValues : function (program){
            course.program=program;
            //course.period=period;
            //course.teacher=teacher;
        },
        sayHello : function(){
            alert('hello');
        }
    }
    //console.log(course);
    return course;
})

.controller('mainController',['$scope','myFactory',function($scope,myFactory){

    $scope.vals = function(){
        //myFactory.setValues(myFactory.program);
//myFactory.sayHello();

        alert('The values are:' +
            '\nProgram: ' + myFactory.program +
            '\nProgram: ' + myFactory.period +
            '\nProgram: ' + myFactory.teacher);
    }
}]) ;

Modules that fill the selects

angular.module('Programs',[])
    .factory('proFactory',function(){
        var selected_program = '0';
        console.log('From proFactory');
    })

    .controller('programsController',function($scope,myFactory){
        $scope.programs=[
        {ID:1 , name:'HTML'},
        {ID:2 , name: 'AngularJS'}
        ];

        $scope.program = $scope.programs[0];
        //myFactory.setValues($scope.program.ID);
});

angular.module('Periods',[])
    .controller('periodsController',function($scope){
    $scope.periods=[
        {ID:1 , name:'Jan-Feb'},
        {ID:2 , name: 'Mar-Apr'}
        ];
    $scope.period = $scope.periods[0];
});

angular.module('Teachers',[])
    .controller('teacherController',function($scope){
    $scope.teachers=[
        {ID:1 , name:'Mark Smith'},
        {ID:2 , name: 'Joe Cliff'}
        ];
    $scope.teacher = $scope.teachers[0];
});

I have tried to get the values of the three selects in order to send the data to another script and show them in an alert before, but i couldnt get that.

I have read that to share data between controllers is necesary to create a provider, and in this case i used a factory.

The factory has an object with three variables, program, period and teacher (the last two are commented), and two function, setValues to assign data and ´sayHello´ to test the factory.

I commented a code line that uses a function sayHello from the factory, so the factory is accesible.

The button in the html has the ng-click=vals() and that function is in the $scope of the mainController, when i click the button i pretend to assign the values of the selects and show them.

I have tried to assign the values through myFactory.setValues(myFactory.program); and in this way too myFactory.setValues($scope.program); but the $scope.program is in the scope of the programsController

Any comment or idea for this. Thanks in advance!!!!

Solution

Thanks benri.

I found another solution using the $parent.

In this case, the page has a mainController (from myFormmodule) that contains three controllers from different modules. The $scope for every controller is for each one. I mean that the $scope from the programsController can not be used in the periodsControllers.

The solution is: Using the $parent.program in the ng-model from the programsController, this way angular says that the model is binded to the $scope.program from the mainController

The HTML is:

<div ng-controller="programsController">
        <select name="program" id="program" ng-model="$parent.program"
        ng-options="prog.name for prog in programs">
        </select>
</div>

and the Controller:

.controller('mainController',['$scope',function($scope){
    $scope.vals = function(){
        alert('The values are:' +
            '\nProgram: ' + $scope.program.name);
    }
}]) ;