AngularJS - Webpage Not Updating

Question

I'm trying to learn AngularJS. Please bear with me.

Currently, I'm trying to create a countdown timer that would update the webpage based on the given interval.

Below is the HTML file:

<!DOCTYPE html>
<html ng-app="timer_module">
<head>
  <meta charset="utf-8"></meta>
  <link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.min.css"></link>
</head>

<body ng-controller="TimerController as controller">

  {{"D:" + controller.days + " H:" + controller.hours + " M:" + controller.minutes + " S:" + controller.seconds}}

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
  <script src="js/timer-module.js"></script>
</body>

</html>

My JS:

angular.module("timer_module", [])
.controller("TimerController", function() {

  var target_date = new Date('Jan, 31, 2017').getTime();

  var days = 0;
  var hours = 0;
  var minutes = 0;
  var seconds = 0;
  var controller = this;

  setInterval(function() {
      var currentDate = new Date().getTime();
      var secondsLeft = (targetDate - currentDate) / 1000;

      days = parseInt(secondsLeft / 86400);
      secondsLeft = secondsLeft % 86400;

      hours = parseInt(secondsLeft / 3600);
      secondsLeft = secondsLeft % 3600;

      minutes = parseInt(secondsLeft / 60);
      seconds = parseInt(secondsLeft % 60);

      controller.days = days;
      controller.hours = hours;
      controller.minutes = minutes;
      controller.seconds = seconds;

      console.log(controller.days);
      console.log(controller.hours);
      console.log(controller.minutes);
      console.log(controller.seconds);
      console.log("---------------------");
  }, 1000);

});

Based on the console logs, the timer is working. However, the webpage values are not updating.

Could you setup a plunkr?

Satej S
– Satej S

2016-03-03 08:02:35 +00:00
Commented Mar 3, 2016 at 8:02 — Satej S
– Satej S, Commented Mar 3, 2016 at 8:02

Bob Sponge · Accepted Answer · 2016-03-03 08:04:41Z

3

Function setInterval does not triggering digest cycle.

Instead of setInterval you can use angular analog $interval:

  $interval(function() {
      // skipped
  }, 1000);

answered Mar 3, 2016 at 8:04

Bob Sponge

4,7481 gold badge25 silver badges25 bronze badges

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

Comments

A. Romeu · Accepted Answer · 2016-03-03 08:04:15Z

2

Use the $interval service for Angular

setInterval will not refresh angular scope of the controller

https://docs.angularjs.org/api/ng/service/$interval

answered Mar 3, 2016 at 8:04

A. Romeu

3021 silver badge11 bronze badges

Comments

Sender · Accepted Answer · 2016-03-03 08:06:57Z

Using $interval service you can do this.

angular.module("timer_module", [])
  .controller("TimerController", function($interval) {

    var target_date = new Date('Jan, 31, 2017').getTime();

    var days = 0;
    var hours = 0;
    var minutes = 0;
    var seconds = 0;
    var controller = this;

    $interval(function() {
      var currentDate = new Date().getTime();
      var secondsLeft = (target_date - currentDate) / 1000;

      days = parseInt(secondsLeft / 86400);
      secondsLeft = secondsLeft % 86400;

      hours = parseInt(secondsLeft / 3600);
      secondsLeft = secondsLeft % 3600;

      minutes = parseInt(secondsLeft / 60);
      seconds = parseInt(secondsLeft % 60);

      controller.days = days;
      controller.hours = hours;
      controller.minutes = minutes;
      controller.seconds = seconds;

      console.log(controller.days);
      console.log(controller.hours);
      console.log(controller.minutes);
      console.log(controller.seconds);
      console.log("---------------------");
    }, 1000);

  });

<!DOCTYPE html>
<html ng-app="timer_module">

<head>
  <meta charset="utf-8"></meta>
  <link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.min.css"></link>
</head>

<body ng-controller="TimerController as controller">

  {{"D:" + controller.days + " H:" + controller.hours + " M:" + controller.minutes + " S:" + controller.seconds}}

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
</body>

</html>

Collectives™ on Stack Overflow

AngularJS - Webpage Not Updating

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related