January 5, 2014 09:15 · Jan 5, 2014
diff --git a/jsbin.oyOQENe.html b/jsbin.oyOQENe.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html ng-app="docsTimeDirective">
+<head>
+<meta name="description" content="Simple Angular JS countdown timer" />
+<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
+<meta charset=utf-8 />
+<title>JS Bin</title>
+</head>
+<body>
+   <div ng-controller="Ctrl2">
+     <label for="minutes">Minutes<input id="minutes" type="text" ng-model="minutes"></label>
+     <label for="seconds">Seconds<input id="seconds" type="text" ng-model="seconds"></label>
+     <button ng-click="startTimer()">Start</button>
+     <h3>{{timeLeft}}</h3>
+   </div>
+</body>
+</html>
diff --git a/jsbin.oyOQENe.js b/jsbin.oyOQENe.js
@@ -0,0 +1,40 @@
+angular.module('docsTimeDirective', [])
+  .controller('Ctrl2', function($scope, $interval, dateFilter) {
+
+    $scope.format = 'mm:ss';
+    $scope.minutes = 0;
+    $scope.seconds = 5;
+    $scope.total = $scope.minutes * 60 + $scope.seconds;
+    $scope.timeLeft = dateFilter( $scope.total * 1000, $scope.format );
+
+    $scope.startTimer = function(){
+
+      var updateTimer = function(){
+
+        $scope.timeLeft = dateFilter( $scope.total * 1000, $scope.format ); 
+
+      };
+
+      var countDown = $interval(function(){
+
+        console.log($scope.timeLeft);
+
+        if ( $scope.total !== 0 && $scope.total !== '0' ) { 
+
+          $scope.total--;
+          updateTimer();
+
+        } else {
+
+          $scope.total = $scope.minutes * 60 + $scope.seconds;
+          updateTimer();
+
+          $interval.cancel(countDown);
+
+        }
+
+      }, 1000);
+
+    };
+
+  });