Updating array used by ng-options, refresh selected object
In angular the use of Track by to track selection by value instead of by reference is a nice feature if needed. But lets say I switch the array behind and the selected object id matches a new Id I want the select to change as well
How do I force it to reevaluate?
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<div ng-controller="MyCtrl">
<select ng-options="option.id for option in collection track by option.id" ng-model="selectedObject"> </select>
<button ng-click="updateCollection()">Update</button>
<p>{{selectedObject.value}}</p>
</div>
JavaScript
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.collection = [{
id: 1,
value: 0
}, {
id: 2,
value: 0
}, {
id: 3,
value: 0
}];
$scope.selectedObject = $scope.collection[0];
$scope.updateCollection = function () {
var newColl = [{
id: 4,
value: 100
}, {
id: 5,
value: 200
}, {
id: 6,
value: 300
}];
$scope.collection = newColl;
//angular.copy($scope.collection, newColl);
};
});