celsoagra/index.html

## index.html
<html ng-app="App">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body ng-controller="MainCtrl">
    <stopwatch title="Stopwatch #1" time="sharedTime"></stopwatch>
    <div stopwatch title="Stopwatch #2" time="sharedTime"></div>
    <hr />
    <div ng-controller="MainCtrl">Powered by AngularJS {{version}}</div>
  </body>
</html>

<script type="text/ng-template" id="stopwatch.html">
  <h2>{{title}}</h2>
  <div><strong>Current Time: </strong>{{currentTime | date:'h:mm:ss a'}}</div>
  <div><strong>Elapsed Time: </strong>{{swctrl.getElapsedMs() }} ms</div>
    <div><strong>Elapsed Time: </strong>{{swctrl.getElapsedMsFormated() }}</div>
  <button id="start" class="btn btn-success" ng-click="swctrl.start()">Start</button>
  <button id="stop" class="btn btn-danger" ng-click="swctrl.stop()">Stop</button>
  <button id="reset" class="btn btn-default" ng-click="swctrl.reset()">Reset</button>
</script>

## main.ts
/* based on https://codepen.io/jhasselkus/pen/Efaxw */

angular.module('App', ['ui.bootstrap'])
.controller('MainCtrl', function($scope, $interval) {
  $scope.version = angular.version.full;
  // The main controller maintains the current time for all stopwatch instances.
  $scope.sharedTime = new Date();
  $interval(function() {
    $scope.sharedTime = new Date();
  }, 500);
})
.directive('stopwatch', function() { return {
  restrict: 'AE',
  templateUrl: 'stopwatch.html',
  scope: {
    // Set title in the isolate scope from the title attribute on the directive's element.
    title: '@title',
    // Set up a bi-directional binding between currentTime on the local scope and the parent
    // scope's variable containing the current time that's the value of the time attribute.
    currentTime: '=time'
  },

  link: function(scope, element, attrs, ctrl) {
  },

  controllerAs: 'swctrl',
  controller: function($scope, $interval) {
    console.log("Creating the directive's controller");
    var self = this;
    var totalElapsedMs = 0;
    var elapsedMs = 0;
    //var time;
    var startTime;
    var timerPromise;

    self.start = function() {
      if (!timerPromise) {
        startTime = new Date();
        timerPromise = $interval(function() {
          var now = new Date();
          //$scope.time = now;
          elapsedMs = now.getTime() - startTime.getTime();
        }, 31);
      }
    };

    self.stop = function() {
      if (timerPromise) {
        $interval.cancel(timerPromise);
        timerPromise = undefined;
        totalElapsedMs += elapsedMs;
        elapsedMs = 0;
      }
    };

    self.reset = function() {
      startTime = new Date();
      totalElapsedMs = elapsedMs = 0;
    };

    self.getTime = function() {
      return time;
    };

    self.getElapsedMs = function() {
      return totalElapsedMs + elapsedMs;
    };

    self.getElapsedMsFormated = function() {
      var milisec = totalElapsedMs + elapsedMs;
      var seconds = milisec / 1000;
    var hours = parseInt( seconds / 3600 );
    seconds = seconds % 3600;
    var minutes = parseInt( seconds / 60 );
    seconds = seconds % 60;
      var numSec = Number(""+seconds);

      return hours+":"+minutes+":" + numSec.toFixed(3);
    };
  }
}});

## style.css
body { padding-top:0px; padding-left:15px; }
	<html ng-app="App">
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
	<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body ng-controller="MainCtrl">
	<stopwatch title="Stopwatch #1" time="sharedTime"></stopwatch>
	<div stopwatch title="Stopwatch #2" time="sharedTime"></div>
	<hr />
	<div ng-controller="MainCtrl">Powered by AngularJS {{version}}</div>
	</body>
	</html>

	<script type="text/ng-template" id="stopwatch.html">
	<h2>{{title}}</h2>
	<div><strong>Current Time: </strong>{{currentTime \| date:'h:mm:ss a'}}</div>
	<div><strong>Elapsed Time: </strong>{{swctrl.getElapsedMs() }} ms</div>
	<div><strong>Elapsed Time: </strong>{{swctrl.getElapsedMsFormated() }}</div>
	<button id="start" class="btn btn-success" ng-click="swctrl.start()">Start</button>
	<button id="stop" class="btn btn-danger" ng-click="swctrl.stop()">Stop</button>
	<button id="reset" class="btn btn-default" ng-click="swctrl.reset()">Reset</button>
	</script>
	/* based on https://codepen.io/jhasselkus/pen/Efaxw */

	angular.module('App', ['ui.bootstrap'])
	.controller('MainCtrl', function($scope, $interval) {
	$scope.version = angular.version.full;
	// The main controller maintains the current time for all stopwatch instances.
	$scope.sharedTime = new Date();
	$interval(function() {
	$scope.sharedTime = new Date();
	}, 500);
	})
	.directive('stopwatch', function() { return {
	restrict: 'AE',
	templateUrl: 'stopwatch.html',
	scope: {
	// Set title in the isolate scope from the title attribute on the directive's element.
	title: '@title',
	// Set up a bi-directional binding between currentTime on the local scope and the parent
	// scope's variable containing the current time that's the value of the time attribute.
	currentTime: '=time'
	},

	link: function(scope, element, attrs, ctrl) {
	},

	controllerAs: 'swctrl',
	controller: function($scope, $interval) {
	console.log("Creating the directive's controller");
	var self = this;
	var totalElapsedMs = 0;
	var elapsedMs = 0;
	//var time;
	var startTime;
	var timerPromise;

	self.start = function() {
	if (!timerPromise) {
	startTime = new Date();
	timerPromise = $interval(function() {
	var now = new Date();
	//$scope.time = now;
	elapsedMs = now.getTime() - startTime.getTime();
	}, 31);
	}
	};

	self.stop = function() {
	if (timerPromise) {
	$interval.cancel(timerPromise);
	timerPromise = undefined;
	totalElapsedMs += elapsedMs;
	elapsedMs = 0;
	}
	};

	self.reset = function() {
	startTime = new Date();
	totalElapsedMs = elapsedMs = 0;
	};

	self.getTime = function() {
	return time;
	};

	self.getElapsedMs = function() {
	return totalElapsedMs + elapsedMs;
	};

	self.getElapsedMsFormated = function() {
	var milisec = totalElapsedMs + elapsedMs;
	var seconds = milisec / 1000;
	var hours = parseInt( seconds / 3600 );
	seconds = seconds % 3600;
	var minutes = parseInt( seconds / 60 );
	seconds = seconds % 60;
	var numSec = Number(""+seconds);

	return hours+":"+minutes+":" + numSec.toFixed(3);
	};
	}
	}});