Angular ng-bind only binds once

Question

The browser console shows $scope.counter incrementing but why doesn't the page increment?

It shows "counter=100" so I know the bind worked once, but not (101, 102, ...) subsequent times as the timer fires:

<!DOCTYPE html>
<html ng-app="bindInterval">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script>
    angular.module('bindInterval', [])
      .controller('bindIntervalController', ['$scope', function($scope) {
        $scope.counter = 100;
        window.setInterval(function() {
          $scope.counter += 1;
          console.log($scope.counter);
        }, 1000);
      }]);
  </script>
</head>
<body><div ng-controller="bindIntervalController">counter={{counter}}</div></body>
</html>

Code at Plunker

I've Googled this but they only show {{::name}} which is different.

Also stuck at 100: <span ng-bind="counter"></span>

Pete Alvin
– Pete Alvin

2015-10-14 18:17:55 +00:00
Commented Oct 14, 2015 at 18:17 — Pete Alvin
– Pete Alvin, Commented Oct 14, 2015 at 18:17

tymeJV · Accepted Answer · 2015-10-14 18:20:51Z

5

Because setInterval doesnt trigger a digest cycle. You need to use the $interval module provided by Angular:

angular.module('bindInterval', [])
  .controller('bindIntervalController', ['$scope', '$interval' function($scope, $interval) {
    $scope.counter = 100;
    $interval(function() {
      $scope.counter += 1;
      console.log($scope.counter);
    }, 1000);
  }]);

answered Oct 14, 2015 at 18:20

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

Farzad Yousefzadeh · Accepted Answer · 2015-10-14 18:20:53Z

1

Do not use setInterval in angularjs because angular would not see the changes that way. use $interval instead.

answered Oct 14, 2015 at 18:20

Farzad Yousefzadeh

2,6291 gold badge24 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular ng-bind only binds once

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related