Stopwatch example

angular.module('stopwatch', []).
  directive('khs', function($timeout) {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var timeoutId;
        $scope.seconds = 0;
        $scope.minutes = 0;
        $scope.running = false;
 
        $scope.stop = function() {
          $timeout.cancel(timeoutId);
          $scope.running = false;
        };
        
        $scope.start = function() {
          timer();
          $scope.running = true;
        };
        
        $scope.clear = function() {
          $scope.seconds = 0;
          $scope.minutes = 0;
        };
        
        function timer() {
          timeoutId = $timeout(function() {
            updateTime(); // update Model
            timer();
          }, 1000);
        }
        
        function updateTime() {
          $scope.seconds++;
          if ($scope.seconds === 60) {
            $scope.seconds = 0;
            $scope.minutes++;
          }
        }
      },
      template:
        '<div class="blueborder">' +
          '<div>{{minutes|numberpad:2}}:{{seconds|numberpad:2}}</div><br/>' +
          '<input type="button" ng-model="startButton" ng-click="start()" ng-disabled="running" value="START" />' +
          '<input type="button" ng-model="stopButton" ng-click="stop()" ng-disabled="!running" value="STOP" />' +
          '<input type="button" ng-model="clearButton" ng-click="clear()" ng-disabled="running" value="CLEAR" />' +
        '</div>',
      replace: true
    };
  }).
  filter('numberpad', function() {
    return function(input, places) {
      var out = "";
      if (places) {
        var placesLength = parseInt(places, 10);
        var inputLength = input.toString().length;
      
        for (var i = 0; i < (placesLength - inputLength); i++) {
          out = '0' + out;
        }
        out = out + input;
      }
      return out;
    };
  });

<!DOCTYPE html>
<html ng-app="stopwatch">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Stopwatch Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body>
    <h1>Welcome</h1>
    <div>Stopwatch Example</div>
    <br/>
    <khs></khs>
  </body>

</html>

/* CSS goes here */

.blueborder {
  border: 1px dotted blue;
  padding: 3px;
}