angulars js variable value not update

Question

In the below code I have a variable named $scope.name. By default it has value "Hello 1". After 5 seconds I have set setTimeout function which updates the value of $scope.name to "Hello 2".

The variable shows the change in debug mode. But the new value does not update to {{name}}. In other words it just show the old value "Hello 1" on the page, not "Hello 2" which is required.

Thanks for help in advance.

var quizApp = angular.module("quizApp",[]);
quizApp.controller("quizCtrl",function($scope){

    $scope.name = "Hello 1";

    function pAHL(){
        $scope.name ="hello 2";
    }
    setTimeout(pAHL, 5000)
})

Idkt · Accepted Answer · 2014-03-24 09:28:10Z

2

You don't need to use $timeout.

function pAHL(){
    $scope.name ="hello 2";
    $scope.$apply();
}

EDIT And a more elegant solution which avoids digest errors is to use $timeout:

function pAHL(){
    $timeout(function () {
        $scope.name ="hello 2";
    });
}

Should do the trick. Fiddle

edited Mar 24, 2014 at 9:28

answered Mar 21, 2014 at 8:05

Idkt

2,9934 gold badges29 silver badges48 bronze badges

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

2 Comments

doodeec Over a year ago

if now pAHL gets called from within angular, it will produce digest error. I think $scope.$apply should be used rather in the place, where non-angular event occured, that way you can reuse the same function for angular and non-angular code

Idkt Over a year ago

@doodeec yeah, what you're saying does make sense. But my solution is based on certain assumptions which hold in this case.

doodeec · Accepted Answer · 2014-03-21 08:01:32Z

1

change setTimeout(pAHL, 5000) to $timeout(pAHL, 5000) and inject $timeout into quizCtrl

var quizApp = angular.module("quizApp",[]);
quizApp.controller("quizCtrl",function($scope, $timeout){
    $scope.name = "Hello 1";

    function pAHL(){
        $scope.name ="hello 2";
    }
    $timeout(pAHL, 5000)
})

or the second option is to use $scope.$apply()

setTimeout(function() {
    $scope.$apply(pAHL);
}, 5000)

answered Mar 21, 2014 at 8:01

doodeec

2,92721 silver badges23 bronze badges

Collectives™ on Stack Overflow

angulars js variable value not update

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related