Consider the AngularJS controller provided below:
function PhoneListCtrl($scope, $http) {
$scope.phones = {};
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data.splice(0, 5);
});
$scope.orderProp = 'age';
}
When using this code (taken from the official angular tutorial), any template bound to the phones model will be dynamically updated with the JSON response. However, if you introduce a setTimeout function around the $scope update like so:
function PhoneListCtrl($scope, $http) {
$scope.phones = {};
$http.get('phones/phones.json').success(function(data) {
setTimeout(
function(){
$scope.phones = data.splice(0, 5);
},
5000
);
});
$scope.orderProp = 'age';
}
In this scenario, the template does not reflect the change, indicating that the angular code fails to detect the model change.
The question at hand is: why does the second case not work as expected? How exactly does the angular runtime recognize the model modification within the $http callback?