angular.js:14700 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting

Question

<div class="bottom-right bottom-timer time botton10">
  <div class="work-clock" ng-bind="workCntrl.getClockString(work)">
  </div>
</div>

getClockString(work) gives error :

[$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"workCntrl.getClockString(work)","newVal":"132:0:15:6","oldVal":"132:0:15:5"},

basically, you shouldn't change the models during rendering. Try using: ng-init="clockString=workCntrl.getClockString(work)" and then use ng-bind="clockString" — Aleksey Solovey
I need to update the clock string values per second but here after initialising , it gives me a fixed constant value. — Priyanka

Shantanu Shantanu · Accepted Answer · 2018-06-12T19:02:38

If your getClockString method returns one string value then call it inside angular's $interval service. Update your template code to:

<div class="bottom-right bottom-timer time botton10">
  <div class="work-clock" ng-init="workCntrl.getClockStringEverySecond(work)" 
     ng-bind="workCntrl.clockString">
  </div>
</div>

In controller update your code to:

workCntrl.getClockStringEverySecond = function(work) {
    $interval(function () {
        workCntrl.clockString= workCntrl.getClockString(work);
    }, 1000);
}

Here, clockString is a scope variable which will be updated every second by getting value from getClockString method. This way you'll not get above issue.

Generic Example

angular.js:14700 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting

1 Answers