AngularJS update value from AJAX callback

Question

When I'm updating scope value directly, it updates in view just fine, but when this value is updated from AJAX callback it doesn't update. Here is simplified example - http://jsfiddle.net/hS8Bs/1/

How can I get around it?

Update: I noticed that clicking second time on the link does update the value, but it's not what I'm looking for.

Answer 1

The real problem is the lack of $scope.$apply. When you are updating the angular model outside of the angular digest you should use apply.

$.getJSON('/echo/json/', {}, function(data){
    $scope.$apply(function(){
        $scope.period = '2010 - 2011';
    });
}); 

This will trigger the diggest to see the update and if your code inside of apply throw an exception it will be redirected to the $exceptionHandler service.

Answer 2

This is an addon to the selected answer, I found that Angular JS still called "Error: $digest already in progress" when I implemented the $apply() function.

So I found Will Vincent's code on this post: AngularJS : What's the Angular way to interact with a form? , it checks for $digest already in progress and only calls $apply() when safe to:

$scope.safeApply = function(fn) {
    var phase = this.$root.$$phase;
    if(phase == '$apply' || phase == '$digest') {
        if(fn && (typeof(fn) === 'function')) {
          fn();
        }
    } else {
       this.$apply(fn);
    }
};

so it would be something like:

$scope.safeApply(function() { ...code here... });

Answer 3

Here is your missing tutorial you need to use $http parameter of controller in order to get field updated. Check your updated example http://jsfiddle.net/hS8Bs/2/