window.setInterval not working on angularjs

Question

I have this small piece of code that uses setInterval method:

function MyController($scope) {
    $scope.clock = new Date();
    var updateClock = function() {
        $scope.clock = new Date();
    };
    setInterval(updateClock, 1000);
};

and html as follows:

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
    <div ng-controller="MyController">
        <h1>Hello {{ clock }}!</h1>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

However, setInterval in MyController does not update time. Where possibly is wrong here ?

It works this way according to a book :

function MyController($scope) {
    $scope.clock = new Date();
    var updateClock = function() {
        $scope.clock = new Date();
    };
    setInterval(function() {
        $scope.$apply(updateClock);
    }, 1000);
    updateClock();
};

Why is that and what goes wrong without using @scope.$apply ?

Will you please give a js fiddle link for this.

Amaranadh Meda
– Amaranadh Meda

2015-07-03 13:15:27 +00:00
Commented Jul 3, 2015 at 13:15 — Amaranadh Meda
– Amaranadh Meda, Commented Jul 3, 2015 at 13:15

Tom · Accepted Answer · 2015-07-03 13:07:16Z

12

Use the angular $interval service.

function($scope, $interval) {
    $scope.clock = new Date();
    var updateClock = function() {
        $scope.clock = new Date();
    };
    $interval(updateClock, 1000);
}

answered Jul 3, 2015 at 13:07

Tom

7,7401 gold badge26 silver badges49 bronze badges

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

4 Comments

simi kaur Over a year ago

I understand I could use that and is the preferable way to do it, but could you please throw some light why did it now work with setInterval ? Infact, if instead of passing updateClock directly to setInterval, if I had done $scope.@apply(updateclock), it works. I am trying to know the reason after this.

Tom Over a year ago

Inside of a traditional setInterval function, Angular does not know about your updates, and thus, you must $apply() it yourself. For example, you could leave it how it was and in your updateClock method call $apply after you change the value to tell Angular you've updated. Instead, using the built in $interval (or $timeout) functions, this work is done for you. Additionally, these return a promise, so you can actually do work on them via ` .then()` if you'd like.

munchschair Over a year ago

Why is updateClock without parenthesis, like this: updateClock()?

vgnsh Over a year ago

@munchschair that's the syntax used for $interval

SD. · Accepted Answer · 2015-07-03 13:11:50Z

5

If you use the JS setInterval() then you will need $scope.$apply() to your method.

var updateClock = function() {
        $scope.clock = new Date();
        $scope.$apply();
    };

The better solution is to use $interval (angular)

$interval(updateClock, 1000);

answered Jul 3, 2015 at 13:11

SD.

9,6171 gold badge27 silver badges57 bronze badges

Collectives™ on Stack Overflow

window.setInterval not working on angularjs

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related