I'm encountering difficulties trying to update a select element in the view when changes occur in the model. In my implementation, I am utilizing ng-options as shown below.
<select ng-options="item as item.empName for item in employees track by item.ID" ng-model="emp.selected">
To demonstrate the problem, here is the simplest scenario I could create.
app.controller('Ctrl', ['$scope', function($scope) {
$scope.employees = [
{
"empName": "John",
"ID": 1
},
];
setTimeout(function(){
$scope.employees = [
{
"empName": "John",
"ID": 1
},
{
"empName": "Sam",
"ID": 1
},
{
"empName": "Frank",
"ID": 1
}];
}, 100);
}]);
The select element displays only 'John' and fails to reflect the additional names that are added later. Even using $scope.$apply(); does not resolve the issue.