Angular Select value not changing - angularjs

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/