Setting scope data from asynchronous code in angularjs

Question

I am learning AngularJs. I have a simple controller:

angular.module('test').controller('RouteFinderController', function ($scope) {
    $scope.startSystem = { systemName: "Test" }
});

this works as intended - the view can make use of the startSystem field.

However, if I make a slight change:

angular.module('test').controller('RouteFinderController', function ($scope) {
    setTimeout(function() {
        $scope.startSystem = { systemName: "Test" }
    },0);
});

It no longer works! I can't access the startSystem field anymore.

Why is this, and how do I fix it?

Use built-in Angular services, like $timeout (docs.angularjs.org/api/ng/service/$timeout) instead of setTimeout - otherwise Angular doesn't know the scope changed and that it needs to update the view — Ian
– Ian, Commented Oct 7, 2014 at 16:20

Christopher Ciufo · Accepted Answer · 2014-10-07 16:21:56Z

2

This Should answer your question, you have to use $scope.$apply() if you're using setTimeout() but as seen here, using $timeout() is recommended.

answered Oct 7, 2014 at 16:21

Christopher Ciufo

662 bronze badges

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

1 Comment

Oliver Over a year ago

Great, thanks. I didn't know that $scope.$apply() was required. the setTimeout in my question was just the simpler form of my real problem, which came up when I was trying to load JSON data asynchronously.

dirkk · Accepted Answer · 2014-10-07 16:26:09Z

1

AngularJS is not aware of the change you made. To apply them you could use

angular.module('test').controller('RouteFinderController', function ($scope) {
    setTimeout(function() {
        $scope.startSystem = { systemName: "Test" }
    },0);
    $scope.$apply();
});

But as $timeout already does that for you, it is much easier to simply use it instead:

angular.module('test').controller('RouteFinderController', function ($scope, $timeout) {
    $timeout(function() {
        $scope.startSystem = { systemName: "Test" }
    },0);
});

answered Oct 7, 2014 at 16:26

dirkk

6,2285 gold badges35 silver badges52 bronze badges

Collectives™ on Stack Overflow

Setting scope data from asynchronous code in angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related