Timer Display using AngularJS

Timer Display

To display timer in a page means, we need to aware of angular directive as following $interval and $filter. Current time get from new Date() object from native java script.  

$interval Directive:

 A interval is wait into a millisecond or trigger to a function, This function many many time to repeatedly calling process is control to us.  

Syntax: 

$interval(fn, delay, [count], [invokeApply]);

fn - a function to call repeatedly.

Delay – number of millisecond to call a function.

Count – Number of time to repeat.(0 value means no-repeat)

invoteApply – set to false means it will skip.

Example: 

HTML:

<div ng-app="timerApp">

    <div ng-controller="timerController">

        {{time}}

    </div>

</div>

JAVAScript:

var app = angular.module("timerApp", []);

app.controller("timerController",['$scope','$interval','$filter', function($scope, $interval, $filter){    

    $interval(function(){ 

        $scope.time = $filter('date')(new Date(),"hh:mm:ss a", 'UTC')

    },1000,0,null);

}]);

Result:

Demo