app.js
                    
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;
};
});
                    index.html
                    
<!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>
                    style.css
                    
/* CSS goes here */
.blueborder {
border: 1px dotted blue;
padding: 3px;
}