How to make a ticking clock (time) in AngularJS and HTML

Question

I'm a beginner AngularJS/html user who's been trying to find a code snippet to make a clock/time item for a web app.

A web search did not provide straight-forward results as easily as I would expect them for something so trivial, so I thought I would post this question to get some answers and also make this easier to find for others.

I have posted my solution but want to see if there is anything nicer out there before choosing an answer!

Answer 1

Just trying to improve Armen's answer. You can use the $interval service to setup a timer.

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

module.controller('TimeCtrl', function($scope, $interval) {
  var tick = function() {
    $scope.clock = Date.now();
  }
  tick();
  $interval(tick, 1000);
});

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

<div ng-app="myApp">
  <div ng-controller='TimeCtrl'>
    <p>{{ clock | date:'HH:mm:ss'}}</p>
  </div>
</div>