angularjs scope value not updating

Question

I am creating a counter using angular and this is my first pass. For some reason, when I update the timeRemaining value, the UI doesn't update. I can see that the line which sets the new value is being hit and the new value is indeed different, but it doesn't seem like the $scope value is being updated (or at least the binding is not being triggered). Any ideas what I'm doing wrong?

var everydayModule = angular.module('Everyday', [])
  .factory('animate', function ($window, $rootScope) {
    var requestAnimationFrame = $window.requestAnimationFrame ||
      $window.mozRequestAnimationFrame ||
      $window.msRequestAnimationFrame ||
      $window.webkitRequestAnimationFrame;


    return function (frame) {
      requestAnimationFrame(function () {
        $rootScope.$apply(frame);
      });
    };
});

function countdown(timeRemaining, endDate, animate) {
  (function frame() {
    var now = new Date();
    var oneDay = 24 * 60 * 60 * 1000;
    timeRemaining = Math.abs((endDate.getTime() - now.getTime()) / oneDay);
    animate(frame);
  })();
}

function EverydayController($scope, animate) {
  $scope.timeRemaining = 0;
  $scope.endDate = new Date(2013, 06, 10);

  countdown($scope.timeRemaining, $scope.endDate, animate);
};

This is my HTML:

<html ng-app="Everyday">
<body>
    <div ng-controller="EverydayController">
        <div class="time" id="seconds">{{timeRemaining}}</div>
    </div>

Capstone · Accepted Answer · 2013-05-06 01:58:26Z

You don't need to use a service for this.

Here's the working code:

var timeRemaining = 0;
var endDate = new Date(2013, 06, 10);
var oneDay = 24 * 60 * 60 * 1000;

function EverydayController($scope) {
  $scope.timeRemaining = timeRemaining;
};
var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.webkitRequestAnimationFrame;

var loop = function () {
    updateModel('seconds', function(scope){
        var now = new Date();
        scope.timeRemaining = Math.abs((endDate.getTime() - now.getTime()) / oneDay);
        requestAnimationFrame(loop);
    });
}

requestAnimationFrame(loop);

function updateModel(element_id, callback){
    var sc = angular.element(document.getElementById(element_id)).scope();
    sc.$apply(function(sc){
        callback(sc);
    });
}

And, here's a working fiddle: http://jsfiddle.net/bHh5M/1/

Also, you shouldn't be doing too much in your controller as per: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller -- See the 'Using controllers correctly' section.

And you may want to look at the new ngAnimate directive.

Collectives™ on Stack Overflow

angularjs scope value not updating

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related