timePicker.directive.js

.directive('timePicker', function($compile) {
  var range = function(qtd) {
    var arr = [];
    for(var i=0;i<qtd;i++)
      arr.push(i<10?'0'+i:''+i);
    return arr;
  };
  var timePickerHoras = range(24);
  var timePickerMinutos = range(60);
  return {
    restrict: 'A',
    replace: true,
    template: '<span>'
      +'<select class="span1" ng-model="timePickerHora" ng-options="hora for hora in timePickerHoras"></select>'
      +' : '
      +'<select class="span1" ng-model="timePickerMinuto" ng-options="minuto for minuto in timePickerMinutos"></select>'
      +'</span>',
    controller: function($scope, $attrs) {
      $scope.timePickerHoras = timePickerHoras;
      $scope.timePickerMinutos = timePickerMinutos;
      var time = [];
      $scope.$watch($attrs.ngModel, function(value) {
        time = (value || '00:00').split(':');
        $scope.timePickerHora = time[0];
        $scope.timePickerMinuto = time[1];
      });
      $scope.$watch('timePickerHora', function(value) {
        if(typeof value == 'undefined')
          return;
        time[0] = value;
        $scope[$attrs.ngModel] = time.join(':');
      });
      $scope.$watch('timePickerMinuto', function(value) {
        if(typeof value == 'undefined')
          return;
        time[1] = value;
        $scope[$attrs.ngModel] = time.join(':');
      });
    }
  };
})