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.