Uncaught Error: [$rootScope:infdig] when implementing an elapsed time calculator

Question

I am getting this error in the browser console in my code for an elapsed time calculator:

Uncaught Error: [$rootScope:infdig]

I calculate the elapsed time from the current time when the app starts.

Here is my html:

<div ng-app="time">
  <div ng-controller="Ctrl2">
    Elapsed time: <span my-current-time="[date,format]"></span>
  </div>
</div>

Here is the JavaScript code:

function Ctrl2($scope) {
  $scope.date = new Date();
  $scope.format = 'M/d/yy h:mm:ss a';
}

angular.module('time', [])
  // Register the 'myCurrentTime' directive factory method.
  // We inject $timeout and dateFilter service since the factory method is DI.
  .directive('myCurrentTime', function($timeout, dateFilter) {
    // return the directive link function. (compile function not needed)
    return function(scope, element, attrs) {
      var format,  // date format
          timeoutId; // timeoutId, so that we can cancel the time updates
      var since;   

      // used to update the UI
      function updateTime() {
        element.text(dateFilter(since, format));
        element.text( (((new Date()).getTime() - since.getTime())/(1000*60)%60) + " minutes, since " + dateFilter(since, format));  
      }

      // watch the expression, and update the UI on change.
      //scope.$watch(attrs.myCurrentTime, function(value) {
       // format = value;
       // updateTime();
      //});

      scope.$watch(attrs.myCurrentTime, function(value) {
          since = value[0];
          format = value[1];
          updateTime();
      });

      // schedule update in one second
      function updateLater() {
        // save the timeoutId for canceling
        timeoutId = $timeout(function() {
          updateTime(); // update DOM
          updateLater(); // schedule another update
        }, 1000);
      }

      // listen on DOM destroy (removal) event, and cancel the next UI update
      // to prevent updating time ofter the DOM element was removed.
      element.bind('$destroy', function() {
        $timeout.cancel(timeoutId);
      });

      updateLater(); // kick off the UI update process.
    }
  });

Please Help, I have also made the fiddle to have a look at the code

http://jsfiddle.net/sojharo/9FnU2/1/

Answer 1

Looks like I've located the issue. I have an assumption that angular creates new arrays each evaluation so it always fires watcher

function Ctrl2($scope) { $scope.date = new Date(); $scope.format = 'M/d/yy h:mm:ss a'; $scope.options = [$scope.date, $scope.format]; //<--line added }

<div ng-app="time"> <div ng-controller="Ctrl2"> Elapsed time: <span my-current-time="options"></span> //<-- binding change. </div> </div>

updated fiddle

ADDED

Also not sure that you really need this watch functionality. Bear in mind that watch works on whole array in your case not inner elements. You can extract value this scope.$eval(attrs.myCurrentTime).