AngularJS using $timeout

by johnwun

HTML

<div ng-app="timeExampleModule">
  <div ng-controller="ClockCtrl">
    Current time is: {{ time.now | date:'h:mm:ss a' | lowercase}}
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<style>
​.ng-invalid { border: 1px solid red; }​

JavaScript

angular.module('timeExampleModule', []).
  // Declare new object called time,
  // which will be available for injection
  factory('time', function($timeout) {
    var time = {};

    (function tick() {
      time.now = new Date();
      $timeout(tick, 1000);
    })();
    return time;
  });

// Notice that you can simply ask for time
// and it will be provided. No need to look for it.
function ClockCtrl($scope, time) {
  $scope.time = time;
}