Within my UI, I have a time element that is continuously updated using AngularJS Interval. Even the milliseconds are constantly running. Is it possible to implement a feature where the time pauses when hovering over it? Any assistance would be greatly appreciated. Below are the provided codes.
Snapshot of the UI
https://i.sstatic.net/MKdpj.png
HTML Code
<div class="container">
<div class="row ">
<div class="col-lg-12 text-center" ng-app="myApp" ng-controller="myCtrl">
<h3 ><b id="thetime">{{theTime| date:'hh:mm:ss sss a'}}</b></h3>
</div>
</div>
</div>
AngularJS Script
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date();
$interval(function () {
$scope.theTime = new Date();
}, 6);
});