Directive's view doesn't reflect model changes

Question

I'm trying to figure out why directive's controller doesn't update data

angular.module('sample', [])
.directive('countdown', function () {

function CountdownController() {
    var countdownController = this;

    countdownController.digit = 5;

    setTimeout(function () {
        console.log('fired');
        countdownController.digit = 200;
    }, 3000);

}


return {
    restrict: 'E',
    controller: CountdownController,
    controllerAs: 'countdownController',
    bindToController: true,
    template: '{{countdownController.digit}}'
}
});

https://jsfiddle.net/mghs52my/

I know I can use $scope.$apply() to force changes, but why should I do that?

Maybe using the $timeout service from Angular helps (not using setTimeout - which is plain JS). Therefore you wouldn't need to call $scope.$apply(). — ilmgb, Aug 08 '15 at 10:53

score 1 · Accepted Answer · answered Aug 08 '15 at 10:53

setTimeout() is outside of any of angular's core services or directives. Whenever you change scope from outside of the core you need to use $apply().

For this reason angular has $timeout which is a wrapper for setTimout() and will call $apply() internally

Change to:

angular.module('sample', [])
    .directive('countdown', function ($timeout) {

    function CountdownController() {
        var countdownController = this;

        countdownController.digit = 5;

        $timeout(function () {
            console.log('fired');
            countdownController.digit = 200;
        }, 3000);

    }


    return {
        restrict: 'E',
        controller: CountdownController,
        controllerAs: 'countdownController',
        bindToController: true,
        template: '{{countdownController.digit}}'
    }
});

DEMO

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

If you want to change you model in each time after some time interval

use $interval instead of setTimeout()

angular.module('sample', [])
    .directive('countdown', function () {

    function CountdownController($interval) {
        var countdownController = this;

        countdownController.digit = 5;

        $interval(function () {
            console.log('fired');
            countdownController.digit = 200;
        }, 3000);

    }


    return {
        restrict: 'E',
        controller: CountdownController,
        controllerAs: 'countdownController',
        bindToController: true,
        template: '{{countdownController.digit}}'
    }
});

'setInterval' vs 'setTimeout' and setTimeout or setInterval

$timeout vs $interval

edited May 23 '17 at 11:51

Community

1
1

answered Aug 08 '15 at 11:00

gaurav bhavsar

2,033
2
22
36

huh? $interval is recurring, a timeout is not...they do different things – charlietfl Aug 08 '15 at 11:13
@charlietfl - agree, let me add this one in answer, thanks. – gaurav bhavsar Aug 08 '15 at 11:16
@gauravbhavsar yeah, I know the difference between them. but when you are using setInterval you have to be sure callback function will be completely executed before next call. I agree in the example it isn't an issue. – Alexander Ponomarev Aug 08 '15 at 17:35

Directive's view doesn't reflect model changes

2 Answers2