Angular: Empty Fiddle

http://angularjs.org/

by kiokotzu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<div ng-controller="MyCtrl">
  <div>Counter: {{counter}}</div>
  <div>Countdown in seconds: {{countdown}}</div>  
  <div>Countdown date time: {{countdown | secondsToDateTime | date:'HH:mm:ss'}}</div>  
  <button ng-click="start()">start</button>
  <button ng-click="stop()">stop</button>      
</div>

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $interval) {
	var intervalId;
  
	$scope.counter = 0;
  $scope.initialCountdown = 10;
  $scope.countdown = $scope.initialCountdown;

  $scope.timer = function(){
    var startTime = new Date();
    intervalId = $interval(function(){
        var actualTime = new Date();
        $scope.counter = Math.floor((actualTime - startTime) / 1000);
				$scope.countdown = $scope.initialCountdown - $scope.counter;
    }, 1000);
  };

	$scope.$watch('countdown', function(countdown){
  	if (countdown === 0){
    	$scope.stop();
    }
  });

	$scope.start = function(){
  	$scope.timer();
  };
  
  $scope.stop = function(){
  	$interval.cancel(intervalId);
  };

}

myApp.controller('MyCtrl', MyCtrl);

myApp.filter('secondsToDateTime', [function() {
    return function(seconds) {
        return new Date(1970, 0, 1).setSeconds(seconds);
    };
}])