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.

jsfiddle.net/hS8Bs/3 This is also a possible solution. But the other solution mentioned below which uses a $http is the right way of doing it. — Ganaraj
– Ganaraj, Commented Sep 20, 2012 at 14:44

Renan Tomal Fernandes · Accepted Answer · 2012-09-20 14:53:20Z

43

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.

answered Sep 20, 2012 at 14:53

Renan Tomal Fernandes

11k4 gold badges50 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GameScripting Over a year ago

$scope.$apply is exactly what I have been looking for, thanks!

Community · Accepted Answer · 2017-05-23 12:09:20Z

5

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... });

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 21, 2013 at 2:10

ako977

8328 silver badges12 bronze badges

Comments

vittore · Accepted Answer · 2012-09-20 14:38:25Z

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/

answered Sep 20, 2012 at 14:38

vittore

17.6k6 gold badges46 silver badges84 bronze badges

Collectives™ on Stack Overflow

AngularJS update value from AJAX callback

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related