I'm trying to display the current time in a view based on a Javascript Date object in my controller. My controller looks like this:

myApp.controller('DateCtrl', function($scope) {
    var date = new Date();
    $scope.minutes = date.getMinutes();
    $scope.hours = date.getHours();
    $scope.seconds = date.getSeconds();
    var updateTime = function() {
        var date2 = new Date();
        $scope.minutes = date2.getMinutes();
        $scope.hours = date2.getHours();
        $scope.seconds = date2.getSeconds();
    }
    $scope.clickUpdate = function() {
        setInterval(updateTime, 1000);
    }
});

In my view I simply have:

<div ng-controller="DateCtrl">
    <div>This is the hour: {{ hours }}</div>
    <div>This is the minute: {{ minutes }}</div>
    <div>This is the second: {{ seconds }}</div>
    <button ng-click="clickUpdate()">Click Update Here!</button>
</div>

For some reason, the setInterval() method works only once and I can't get it to keep running updateTime() every 1 second as was set. I put in a simple console.log() statement and that ran every 1 second...so I'm very confused.

I've also checked out $scope.watch() and $scope.digest() but I'm not quite sure how they can be used/if I'm supposed to use them in this scenario.

EDIT: Upon further inspection, it appears as if the setInterval is working properly, calling updateTime() every 1 second, but the values in the scope aren't being reflected in my view after every call.

I'm trying to display the current time in a view based on a Javascript Date object in my controller. My controller looks like this:

myApp.controller('DateCtrl', function($scope) {
    var date = new Date();
    $scope.minutes = date.getMinutes();
    $scope.hours = date.getHours();
    $scope.seconds = date.getSeconds();
    var updateTime = function() {
        var date2 = new Date();
        $scope.minutes = date2.getMinutes();
        $scope.hours = date2.getHours();
        $scope.seconds = date2.getSeconds();
    }
    $scope.clickUpdate = function() {
        setInterval(updateTime, 1000);
    }
});

In my view I simply have:

<div ng-controller="DateCtrl">
    <div>This is the hour: {{ hours }}</div>
    <div>This is the minute: {{ minutes }}</div>
    <div>This is the second: {{ seconds }}</div>
    <button ng-click="clickUpdate()">Click Update Here!</button>
</div>

For some reason, the setInterval() method works only once and I can't get it to keep running updateTime() every 1 second as was set. I put in a simple console.log() statement and that ran every 1 second...so I'm very confused.

I've also checked out $scope.watch() and $scope.digest() but I'm not quite sure how they can be used/if I'm supposed to use them in this scenario.

EDIT: Upon further inspection, it appears as if the setInterval is working properly, calling updateTime() every 1 second, but the values in the scope aren't being reflected in my view after every call.

• javascript
• model-view-controller
• angularjs
• controller
• setinterval

• setInterval(updateTime, 1000) – elclanrs Commented Jul 25, 2013 at 2:39
• For some reason it has the same behavior whether I use "updateTime()" or "updateTime", it doesn't continue to update itself. – Shawn Taylor Commented Jul 25, 2013 at 2:47
• Update the scope values inside the updateTime function. – elclanrs Commented Jul 25, 2013 at 2:52
• Sorry, I'm a little confused, aren't the values in my scope being updated inside updateTime currently? They are within the function I'm setting equal to "var updateTime". – Shawn Taylor Commented Jul 25, 2013 at 2:54
• $timeout(updateTime, 1000); – Jimmyt1988 Commented May 14, 2024 at 11:46

2 Answers 2

It's because you are changing the scope from outside the angular world (setInterval). You must $apply the changes:

var updateTime = function() {
    $scope.$apply(function(){
        var date2 = new Date();
        $scope.minutes = date2.getMinutes();
        $scope.hours = date2.getHours();
        $scope.seconds = date2.getSeconds();
    });
}

or use a angular aware function such as $timeout. Check @asgoth answer in this question to create an angular aware setInterval() function.

You can also use $scope.$digest() after you change model , but I think $scope.$apply is better