I've been working on a simple stopwatch like timer app as a way to get familiar with Angular JS. With the help of this (How do I use $scope.$watch and $scope.$apply in AngularJS?) I was able to get two different variables on the javascript side to synchronize with one another on a change using $watch. I use these to display different formats of the start time.
Then I wanted to use the same approach to update the current position. Initially I was using setInterval and clearInterval to handle the timer updates. In that case, $watch was not catching the updates and the DOM was not being changed.
This question pointed out that Angular has custom $timeout and $interval functions which take care of $apply and $watch updates:
using setInterval in angularjs factory
I had some trouble using $interval. I was getting "$interval is not defined". To make it available, I passed it in as part of the controller function definition:
app.controller("MainController", function($scope, $interval){
...
}
This all works as expected in the above fiddle, but when I run it locally the start and position variables get reset to 0 when I start the timer. The timer continues to run and log to the console, but before that happens I see the unexpected reset:
Updating set_to to 10 app.js:52
start called app.js:76
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. angular.js:2606
Updating hms to 00:00:00 app.js:46
Updating set_to to 0 app.js:52
Updating hms to 00:00:00 app.js:46
9
Any ideas why I'm seeing the reset locally?
P.S.
Along the way I found a much more polished implementation of a timer using Angular JS, in case that's what you're actually looking for:
http://siddii.github.io/angular-timer/
https://github.com/siddii/angular-timer
Thanks!
Edit: In case it helps, I've posted the full code here: https://github.com/charlesbrandt/timer
