Hi skp,
Use $interval service available in AngularJS. This service works same as setInterval().
I am calling $interval with 1 seconds of interval. You can change it as per your convenience.
Once the page is loaded it will show currentdate and then the currentdate will be changed according to interval.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Refresh DIV periodically in Angularjs</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $interval) {
$scope.currentdate = new Date();
$interval(function () {
$scope.currentdate = new Date();
}, 1000);
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="dtd">
<div class="day">
{{currentdate | date:"hh"}}:{{currentdate | date:"mm"}}:{{currentdate | date:"ss"}}
<span>{{currentdate | date:"a"}}</span></div>
<div class="day2">
<div class="">
{{currentdate | date:"EEEE"}}</div>
<div class="">
{{currentdate | date:"mediumDate"}}</div>
</div>
</div>
</body>
</html>
Demo
