Infinite loop when calling $evalAsync within a $watch function (AngularJS)

Question

I'm following along Tero Parviainen's book "Build your own angularJS" and I'm finding trouble understanding one of the concepts he introduces when talking about $evalAsync.

In one of the examples he declares a watcher which always calls $evalAsync:

it('eventually halts $evalAsyncs added by watches', function() {
  scope.aValue = [1, 2, 3];
  scope.$watch(
    function(scope) {
      scope.$evalAsync(function(scope) { });
      return scope.aValue;
    },
    function(newValue, oldValue, scope) { }
  );
  expect(function() { scope.$digest(); }).toThrow();
});

Seeing that example, I would expect the digest cycle to iterate twice through the watchers until stopping. In the implementation of the scope, the code runs until the digest is not dirty or there are no more $evalAsyncs in the queue.

Scope.prototype.$digest = function () {
  var ttl = 10;
  var dirty;
  this.$$lastDirtyWatch = null;
  do {
    while (this.$$asyncQueue.length) {
      var asyncTask = this.$$asyncQueue.shift();
      asyncTask.scope.$eval(asyncTask.expression);
    }
    dirty = this.$$digestOnce();
    if ((dirty || this.$$asyncQueue.length) && !(ttl--)) {
      throw '10 digest iterations reached';
    }
  } while (dirty || this.$$asyncQueue.length);
}; 

If for each iteration in the loop, one asyncTask if shifted from the array, how comes that that loop runs forever? Shouldn't the loop stop because the $$asyncQueue gets emptied?

Hope I made myself clear and thanks everyone!

Answer 1

By calling:

scope.$evalAsync(function(scope) { });

you add new item to asyncQueue:

asyncQueue.push({scope: this, expression: expr, locals: locals});

So removing task by this.$$asyncQueue.shift(); we call new iteration a.e. new digest cycle.

Anyways the proper implementation of watcher is:

scope.aValue = [1, 2, 3];
  scope.$watch(
    function(scope) {
      return scope.aValue;
    },
    function(newValue, oldValue, scope) { }
  );