Untitled

<!DOCTYPE html>
<html ng-app="clock" >

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
    <script src="script.js"></script>
  </head>


  <ng-clock></ng-clock>

</html>

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

// ngClock module
// ================================================
angular.module('ngClock', [])

// filters
// ================================================
.filter('pad', function() {
  return function(num) {
    return (num < 10 ? '0' + num : num); // coloca o zero na frente
  };
})
// directives
// ================================================
.directive('ngClock', ["$timeout", function($timeout){
  return {
    restrict: 'E',
    template:'<span class="time">'
        + '<span class="hours">'
        + ' {{date.getHours() | pad}}'
        + '</span>:<span class="minutes">'
        + ' {{date.getMinutes() | pad}}'
        + '</span>:<span class="seconds">'
        + ' {{date.getSeconds() | pad}}'
        + '</span>'
        + '</span>',
    controller: function($scope, $element) {
      $scope.date = new Date();
      
      var tick = function() {
        $scope.date = new Date();
        $timeout(tick, 1000);
      };
      $timeout(tick, 1000);
    }
  }
  
}]);

.time {
  font-family: 'Voltaire';
  font-size: 4em;
  margin: 0;
}