an angular clock directive

angular_clock.js

angular
  .module('edaApp', [])
  .directive('edaClock', [ 
    '$timeout',
    function($timeout){
      /**
       * should be in a provider or at least a service 
       */
      var htmlTemplate =  [
                            '<div class="well">',
                            '   <p>{{clockCtrl.time.raw | date: \'hh:mm:ss\'}}</p>', 
                            '</div>'
                          ].join(' ');
      return {
              restrict: 'E',
              
              template : htmlTemplate,
              
              controllerAs : 'clockCtrl',
              
              controller : function($timeout){
                self = this;
                
                self.time = {};
                
                var oneSecPassed = function(){
                  self.time.raw = new Date();
                  $timeout(oneSecPassed, 1000)
                };
                
                oneSecPassed();
              },
              
              link : function(scope, element, attrs, ctrl, transclude) { 
                
                element.on('click', function(event){
                  event.preventDefault;
                  console.info('don\'t tap the clock!');
                });
                
              }  
      };
    }
  ]);

a plunker of this clock