Jeeva Jeeva - 1 year ago 219
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);


Answer Source

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(){

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download