Angular Select value not changing

Question

I have several rows in a table, each having a select menu in the last cell. The initial value is populated by one controller and the select options being populated by a second controller. The second controller also updates the value on ng-change. If I use ng-selected, I get the initial value but does not change the value on change. (it does log it to the console though). If I use ng-init, it does not give a value on load, but does update after changing the value.

app.controller('agents', function($scope, $http){

    $scope.getAgents = function(){
        $http.get("getagents.php").then(function(response) {
            $scope.agents = response.data;
        });
    }

    $scope.getActiveAgents = function(){
        $http.get("activeagents.php").then(function(response) {
            // console.log(response.data);
            $scope.activeagents = response.data;
        });
    }

    $scope.updateAgenttoLead = function(agent, id){

       console.log('ID:'+ id);
       console.log('Agent:'+ agent);
    }

    $scope.updateForm = {};

    $scope.updateAgent = function() {
        $http.post('updateagent.php', {
                'id' : $scope.updateForm.id, 
                'username' : $scope.updateForm.username, 
                'password' : $scope.updateForm.password
            }
        ).success(function(data) {
            // console.log(data);
            $scope.updateForm = {};
            $scope.getAgents();
            // if (!data.success) {
            //   // if not successful, bind errors to error variables
            //   $scope.errorName = data.errors.name;
            //   $scope.errorSuperhero = data.errors.superheroAlias;
            // } else {
            //   // if successful, bind success message to message
            //   $scope.message = data.message;
            // }
          });
    };

    $scope.addForm = {};

    $scope.addAgent = function() {

        $http.put('createagent.php', {
            'username' : $scope.addForm.username, 
            'password' : $scope.addForm.password,
            'type' : $scope.addForm.type
            }
        ).success(function(data) {
            $scope.addForm = {};
            $scope.getAgents();
          });
    };

    $scope.deleteagent = function(newid){

        var r =confirm('Are you sure you want to delete '+ newid+'?');

        if(r){
            $http.post('deleteagent.php', {
                'newid':newid
                }
            ).success(function(data) {
                $scope.getAgents();
                console.log(data);
              });
        }
    };

}); // end controller

app.controller('leads', function($scope, $http){
    $scope.getLeads = function(){
        $http.get("getleads.php").then(function(server) {
            $scope.leads = server.data;

        });
    }

    $scope.dispositions =[
        'Never Called',
        'Not Available',
        'Left Message',
        'Call Later',
        'Not Interested',
        'Not Qualified',
        'Bad Phone',
        'No Dates',
        'DNC',
        'Post Date',
        'Sold'
    ];

    $scope.updateDisp = function(disp, id){

        var r = confirm('Update record '+ id +' to '+disp+'?');
            if(r){
                $http.post('updatedisp.php', {
                        'id' : id, 
                        'disp' : disp
                    }
                ).success(function(data) {
                    console.log(data);
                  });
            }else{
                $scope.leads={};
                $scope.getLeads();
            }
    }
}); // end controller

Answer 1

You are using controllers as services. Controllers are meant to be used as a way to bind a UI to implementation, not to provide functionality for retrieving data.

I would refactor your code to have a single controller for your page/table and then put all of this agent/leads code in separate services that your controller then consumes when needed.

See this blog post for more insight: http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/