How to update the ng-repeat view of a list?

Question

This simple fiddle displays a list using ng-repeat . But if I change the list from outside the DOM (in this case, using a timer), the list view does not get updated.

What do I have to do to fix this?

Answer 1

Because you're calling setTimeout( fn ) from outside of Angular, the digest cycle doesn't know that the variable has been updated.

Try using Angular's $timeout service so that when the function is run, Angular will know to apply the digest cycle.

Updated example

Edit: example using $scope.$apply() , in case $timeout is not what's being used.

From the comments: "Yeah, you can run if(!$scope.$$phase) $scope.$apply() . There is also $scope.$digest if you're just digesting the local scope. JSFiddle "

Code example from within controller:

$scope.lines = lines;
setTimeout(function() {
    lines.push({text: 'new text'});
    console.log('Line added: ' + lines.length);
    if ( !$scope.$$phase ) $scope.$apply();
}, 1000);