Wie kann ich die Zeit im AngularJs-Intervall anzeigen und pausieren?

Question

Ich habe eine Zeit in meiner UI, wo in der Zeit kontinuierlich mit dem AngularJS Intervall aktualisiert wird. Sogar die Millisekunden laufen ununterbrochen. In diesem Sinne ist es möglich, die Zeit anzuhalten, wenn ich den Mauszeiger darüber bewege. Hilfe wird sehr geschätzt. Unten sind die Codes.

Bild des UI

html

<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-Code

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $interval) { 
    $scope.theTime = new Date(); 

    $interval(function() { 
     $scope.theTime = new Date();  
    }, 6); 

}); 

Answer 1

in ng-mouseover stoppen Intervallfunktion in ng-mouseleave Intervallfunktion

$scope.startInterval = function(){ 
     $scope.flag = $interval(function(){ 
         $scope.theTime = new Date(); 
        }, 6); 
    } 

    $scope.stopInterval= function(){ 
     if($scope.flag) 
     $interval.cancel($scope.flag); 
    } 
    $scope.startInterval(); 

https://jsfiddle.net/ebinmanuval/7qo4jtjv/