Why AngularJS ng-bind does not update the view

Question

Why this little angular module can't update the view when the ng-bind property is changed?

<body ng-app="bindExample">

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      var vm = this;
      vm.name = 'Whirled';
      window.setInterval(function(){ vm.name = 'Jon';}, 5000);
    }]);
</script>

<div ng-controller="ExampleController as vm">
    Hello <span ng-bind="vm.name"></span>!
</div>
</body>

I'm expecting that after 5 seconds the output changes Hello Jon by it stays at Hello Whirled. Why is this? Do I need to do anything else?

Community · Accepted Answer · 2017-05-23 12:10:04Z

10

use $interval service its

Angular's wrapper for window.setInterval here is the DOC

$interval(function(){
     vm.name = 'Jon';
}, 1000);

don't forget to inject $interval as,

.controller('ExampleController', ['$scope', $interval, function($scope, $interval) { ....

when using setInterval its out of the angular scope so u need to use $interval here. $interval is execute against scope,

OR use $scope.$apply()

window.setInterval(function(){
    vm.name = 'Jon';
    $scope.$apply();
}, 5000);

$apply enables to integrate changes with the digest cycle

this answer would be helpful

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Feb 10, 2015 at 9:01

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam R. Over a year ago

Thank you. If I call an AJAX to read the value and then apply it to the model in my resource success function, do I need to use $apply as well?

Rakhat Over a year ago

If you use angular's $http service for retrieving data from server, so no need to call $scope.apply();

Kalhan Over a year ago

NO if you use angular $http service as #neilhem mentioned in the last comment, but if you use like jquery ajax you need to use $apply() there to tell the angular to there is something out side the scope and need to bind to the scope.

Raulucco · Accepted Answer · 2015-02-10 09:09:28Z

1

Yes, to use $interval is a solution. Usually you would change the model on a method attribute of $scope. So angular will take the responsibility of updating the view. If you use a jQuery callback inside a directive you would have to use scope.$apply so that angular knows something happend

answered Feb 10, 2015 at 9:09

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Why AngularJS ng-bind does not update the view

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related