AngularJS value won't change with setTimeout

Question

I wanted to change a scope variable after the page has been initialized. I have a angular application with following code:

$scope.names = ['Jack'];
append_name = function(){$scope.names.push('Bob');}
setTimeout(append_name, 2000);

Tough I don't see the value change after the specified delay. Here is the plunker http://plnkr.co/edit/FBa2fwb7js8pRNENNJof

Favor $timeout over setTimeout: stackoverflow.com/questions/19609796/… — Davin Tryon
– Davin Tryon, Commented May 15, 2014 at 9:47

Community · Accepted Answer · 2017-05-23 12:06:10Z

1

Short answer: use the built-in $timeout service instead of setTimeout: http://plnkr.co/edit/nh1jEhocRpXtD0rUTh4k?p=preview

Long answer is here: https://stackoverflow.com/a/9693933/1418796

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered May 15, 2014 at 9:47

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

Comments

jcubic · Accepted Answer · 2015-07-31 08:25:45Z

0

If you create code outside of angular you need to tell that you change something with $apply

$scope.names = ['Jack'];
append_name = function() {
   $scope.$apply(function() {
      $scope.names.push('Bob');
   });
};
setTimeout(append_name, 2000);

You can create handy higher order function to wrap your functions with $apply:

function ngWrap($scope, fn) {
    return function() {
        var args = [].slice.call(arguments);
        if ($scope.$$phase) {
            fn.apply(null, args);
        } else {
            return $scope.$apply(function() {
                fn.apply(null, args);
            });
        }
    };
}

this can be used like:

setTimeout(ngWrap($scope, function() {
    $scope.names.push('Bob');
}), 2000);

Also angular have $timeout that will handle this.

edited Jul 31, 2015 at 8:25

answered May 15, 2014 at 9:45

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

2 Comments

Ariunbayar Over a year ago

thanks. I had to write socket.on('myevent', function(arg){$scope.$apply(function(){trigger_fn(arg)})}) for my socket.io implementation. Any chance this could be simpler to read?

jcubic Over a year ago

You can use socket.on('myevent', ngWrap($scope, trigger_fn)); with function from my answer.

Collectives™ on Stack Overflow

AngularJS value won't change with setTimeout

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related