Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div>
    <clock id="input"></clock>
</div>

CSS

.timepicker {
  background-color: #F2F2F2;
  //position: absolute;
  color: #8C8C8C;
  border: 1px solid #B5B5B5;
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);
  -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);
  z-index: 2147483647;
}
.timepicker .clock {
  width: 200px;
  height: 200px;
  position: relative;
  padding: 5px;
}
.timepicker .done {
  cursor: pointer;
  text-align: center;
  text-wrap: nowrap;
  line-height: 34px;
  font-size: 14px;
  display: block;
  border-top: 1px solid #DEDEDE;
}
.timepicker .done:hover {
  background-color: #DEDEDE;
  color: #848484;
}
.timepicker .meridiem {
  position: absolute;
  bottom: 5px;
  width: 32px;
  height: 32px;
  background-color: white;
  line-height: 32px;
  font-size: 14px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}
.timepicker .meridiem.selected {
  background-color: #D6F0F9;
  color: #6D828C;
}
.timepicker .meridiem.am {
  left: 5px;
}
.timepicker .meridiem.pm {
  right: 5px;
}
.timepicker .bubble {
  position: absolute;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}
.timepicker .bubble:hover {
  background-color: #D6F0F9;
  color: #6D828C;
}
.timepicker .bubble.selected {
  color: #D6F0F9;
  background-color: blue;
}
.timepicker .unit {
  top: 5px;
  background-color: white;
}
.timepicker .unit.hour {
  left: 5px;
}
.timepicker .unit.minute {
  right: 5px;
}
.timepicker .face {
  width: 100%;
  height: 100%;
  background-color: white;
  border: none;
  border-radius: 50%;
  position: relative;
}
.timepicker .face:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background-color: blue;
  border-radius: 50%;
  content: "";
  display: block;
}
.timepicker .hand {
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 50% 100%;
 ...

JavaScript

angular.module('myApp.clock', [])
myApp.directive('clock', function(){
  return {
    restrict: 'E',
    link: function (scope, el, atts ){
 $.widget('wx.timepicker', {
   _create: function() {
     this.timepicker = $('<div class="timepicker"><div class="clock"><div class="unit hour bubble">Hr</div><div class="unit minute bubble">Min</div><div class="face"><div class="time-bubbles"></div><div class="minute hand"></div><div class="hour hand"></div></div><div class="meridiem am bubble">AM</div><div class="meridiem pm bubble">PM</div></div><div class="done">Done</div></div>').hide().insertAfter(this.element);
    this.hour = 0;
     this.minute = 0;
     this.meridiem = 0; // 0=am, 1=pm
     this.display = 0; // 0=none, 1=hours, 2=minutes
     this.isOpen = false;
    var self = this;
    
    this.element.prop('autocomplete',false);
    if(self._parseInput()) {
      self._refreshAll();
    }
    this.timepicker.find('.unit.minute').on('click', function() {
      self._buildMinutes();
    });
    this.timepicker.find('.unit.hour').on('click', function() {
      self._buildHours();
    });
    this.timepicker.on('click', '.time.hour', function() {
      self.hour = $(this).data('value');
      self._buildMinutes();
      self._refreshAll();
    });
    this.timepicker.on('click', '.time.minute', function() {
      self.minute = $(this).data('value');
      self._refreshAll();
    });
    this.element.on('focus click', function() { //opens clockface
      self._open();
    });
    this.timepicker.on('mousedown', function(e) {
      return false;
    });
    this.element.on('blur', function(e) {
      self._parseInput();
      self._refreshInput();
      self._close();
    });
    this.element.on('input', function() {
      if(self._parseInput()) {
        self._refreshClock();
      }
    });
    this.timepicker.find('.done').on('click', function() {
      self.element.focus();
      self._close();
    });
    this.timepicker.find('.meridiem.am').on('click',...