How to Troubleshoot Angular "10 $digest() iterations reached" Error

10 $digest() iterations reached. Aborting!

There is a lot of supporting text in the sense of "Watchers fired in the last 5 iterations: ", etc., but a lot of this text is Javascript code from various functions. Are there rules of thumb for diagnosing this problem? Is it a problem that can ALWAYS be mitigated, or are there applications complex enough that this issue should be treated as just a warning?

as Ven said, you are either returning different (not identical) objects on each $digest cycle, or you are altering the data too many times.

The fastest solution to figure out which part of your app is causing this behavior is:

1. remove all suspicious HTML - basically remove all your html from the template, and check if there are no warnings
2. if there are no warnings - add small parts of the html you removed and check if the problem is back
3. repeat step 2 until you get a warning - you will figure out which part of your html is responsible for the problem
4. investigate further - the part from step 3 is responsible for either mutating the objects on the $scope or is returning non-identical objects on each $digest cycle.
5. if you still have $digest iteration warnings after step 1, than you are probably doing something very suspicious. Repeat the same steps for parent template/scope/controller

You also want to make sure you are not altering the input of your custom filters

Keep in mind, that in JavaScript there are specific types of objects that don't behave like you would normally expect:

new Boolean(true) === new Boolean(true) // false
new Date(0) == new Date(0) // false
new String('a') == new String('a') // false
new Number(1) == new Number(1) // false
[] == [] // false
new Array == new Array // false
({})==({}) // false

Usually that happens when you're returning a different object every time.

For example, if you use this in a ng-repeat:

$scope.getObj = function () {
  return [{a: 1}, {b: 2}];
};

You're going to get this error message because Angular tries to have the "stability" and will execute the function until it returns the same result 2 times (comparing with ===), which in our case will never return true because the function always returns a new object.

console.log({} === {}); // false. Those are two different objects!

In this case, you can fix it by storing the object in scope directly, e.g.

$scope.objData = [{a: 1}, {b: 2}];
$scope.getObj = function () {
  return $scope.objData;
};

That way you're always returning the same object!

console.log($scope.objData === $scope.objData); // true (a bit obvious...)

(You should never encounter that, even on complex applications).

Update: Angular has added some more in-depth explanation on their website.

Just wanted to throw this solution in here, hopefully it'll help others. I was getting this iteration problem because I was iterating over a generated property which was making a new object every time it was called.

I fixed it by caching the generated object the first time it was requested, and then always returning the cache if it existed. A dirty() method was also added, which would destroy the cached results as needed.

I had something like this:

function MyObj() {
    var myObj = this;
    Object.defineProperty(myObj, "computedProperty" {
        get: function () {
            var retObj = {};

            return retObj;
        }
    });
}

And here's with the solution implemented:

function MyObj() {
    var myObj = this,
        _cached;
    Object.defineProperty(myObj, "computedProperty" {
        get: function () {
            if ( !_cached ) {
                _cached = {};
            }

            return _cached;
        }
    });

    myObj.dirty = function () {
        _cached = null;
    }
}

There also is the possibility of it not being an infinite loop at all. 10 iterations is not a sufficiently large number to conclude that with any amount of certainty. So before going on a wild-goose chase it may be advisable to rule out that possibility first.

The easiest method to do so is increasing the maximum digest loop count to a much larger number, which can be done in the module.config method, using the $rootScopeProvider.digestTtl(limit) method. If the infdig error does no longer appear you simply have some sufficiently complex update logic.

If you build data or views relying on recursive watches you may want to search for iterative solutions (i.e. not relying on new digest loops to be started) using while, for or Array.forEach. Sometimes the structure is just highly nested and not even recursive, there probably is not much to be done in those cases except raising the limit.

Another method of debugging the error is looking at the digest data. If you pretty print the JSON you get an array of arrays. Each top level entry represents an iteration, each iteration consists of a list of watch entries.

If you for example have a property which is modified in a $watch on itself it is easy to see that the value is changing infinitely:

$scope.vm.value1 = true;
$scope.$watch("vm.value1", function(newValue)
{
    $scope.vm.value1 = !newValue;
});

[
   [
      {
         "msg":"vm.value1",
         "newVal":true,
         "oldVal":false
      }
   ],
   [
      {
         "msg":"vm.value1",
         "newVal":false,
         "oldVal":true
      }
   ],
   [
      {
         "msg":"vm.value1",
         "newVal":true,
         "oldVal":false
      }
   ],
   [
      {
         "msg":"vm.value1",
         "newVal":false,
         "oldVal":true
      }
   ],
   [
      {
         "msg":"vm.value1",
         "newVal":true,
         "oldVal":false
      }
   ]
]

Of course in larger project this may not be as simple, especially since the msg field often has the value "fn: regularInterceptedExpression" if the watch is a {{ }} interpolation.

Other than that the already mentioned methods, like cutting down the HTML to find the source of the problem, are of course helpful.