Jeeva Jeeva - 2 months ago 31x
HTML Question

How to hover over and pause the time in AngularJs Interval?

I have a time in my UI where in the time is continuously updated using the AngularJS Interval. Even the Milliseconds are contunously running. Keeping that in mind is it possible to pause the time When i hover over it. Help is really appreciated. Below are the codes.

Image of the UI

enter image description here


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

AngularJS Code

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

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



in ng-mouseover stop interval function in ng-mouseleave start interval function

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

    $scope.stopInterval= function(){