Infinite loop with Angular expression binding

Question

I have an angular application that displays the value returned by a controller method through a simple expression binding:

<div>{{getValue()}}</div>

If the method in question just returns a value, the method is called twice, and that is strange enough:

$scope.getValue = function(){
  return 'some value';
}

But if the method does some asynchronous work such as getting a file from the server, the code goes into an infinite loop:

$scope.getValueAsync = function(){
  $http.get('myfile.html')
    .success(function (data, status, headers, config) {
      return 'some async value';
    });

  return 'file not found'; // same value returned every time but $digest cycle still loops
}

I'm new to Angular so have probably missed something basic here, but can someone please explain what is going on?

Plunker

Here's a plunker to play with http://plnkr.co/7BriYDbdVJvIoIigQcTU

Answer 1

Even though your async function returns the same exact string every time, the $digest cycle is fired in loops because your function also makes an ajax call with $http service.

$http service triggers $rootScope.$apply() when requests are completed and since $apply triggers a $digest cycle it makes your view expression to be re-evaluated, which in return causes your async function to be called again, and so on...

app.controller('MainCtrl', function($scope, $http) {

  $scope.getValue = function(){
    return 'some value';
  }

  $scope.getValueAsync = function(){
    $http.get('myfile.html')
      .success(function (data, status, headers, config) {
        return 'some async value';
      });

    return 'file not found';
  }
});

<div>{{getValueAsync()}}</div>

Moral of the story: If you use functions in expressions, make sure your functions don't affect something outside of them that would trigger a $digest loop, and make sure your functions always return the same output given the same input.