CODEWITHSUNDEEP
javascriptangularjs
Oliver
Oliver

Reputation: 11617

Setting scope data from asynchronous code in angularjs

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?

Upvotes: 0

Views: 33

Answers (2)

dirkk
dirkk

Reputation: 6218

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

Upvotes: 1

Christopher Ciufo
Christopher Ciufo

Reputation: 66

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

Upvotes: 2

Related Questions