How to get the current date with Angularjs with refresh on date?

Question

How to do a refresh only on an "ng-Binding" and not on the page, to get the current date via Angularjs?

I have the following code:

function updateTime() {
                scope.time = new Date();
            }

But I need to do a refresh, so that it is synchronized with the logic, that is: Whenever update the minute, in my html it also updates.

 <span>{{time|date: 'hh:mm a'}}</span>

I saw something about the $intervalbut so far I have not succeeded, if someone can explain how to use the same, or another way to get the same result, I am grateful.

Answer 1

The $interval¹ implements the window.setInterval², that runs a block of code repeatedly, within a specific range. I implemented the code below taking as reference the example implemented using directives.

var app = angular.module('clock', []);

app.controller('ClockController', ['$scope', '$interval', 'dateFilter', function($scope, $interval, dateFilter) {
  $scope.currentTime = dateFilter(new Date(), 'hh:mm');
  
  var updateTime = $interval(function() {
    $scope.currentTime = dateFilter(new Date(), 'hh:mm');
  }, 1000);
}]);

<div ng-app="clock" ng-controller="ClockController">
  {{ currentTime }}
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>