fix(timepicker): Always pad the hours and minutes

The timepicker only padded the minutes and hours when the template first
loaded. The hours and minutes are now also padded when the model
changes.

Fixes angular-ui#2314.

Author: mbuttu

src/timepicker/test/timepicker.spec.js

@@ -714,11 +714,39 @@ describe('timepicker directive', function () {
       expect(getModelState()).toEqual([14, 40]);
     });
 
+    it('always pads hours & minutes', function() {
+      // Make sure hours and minutes are padded in 12 hour format
+      $rootScope.meridian = true;
+      element = $compile('<timepicker ng-model="time" show-meridian="meridian"></timepicker>')($rootScope);
+      $rootScope.$digest();
+
+      var hours = getHoursInputEl();
+      var minutes = getMinutesInputEl();
+
+      // Make sure the time is padded when the template is first loaded
+      expect(getTimeState()).toEqual(['02', '40', 'PM']);
+      expect(getModelState()).toEqual([14, 40]);
+
+      changeInputValueTo(hours, 5);
+      changeInputValueTo(minutes, 7);
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['05', '07', 'PM']);
+      expect(getModelState()).toEqual([17, 7]);
+
+      // Make sure hours and minutes are padded in 24 hour format
+      $rootScope.meridian = false;
+      changeInputValueTo(hours, 0);
+      changeInputValueTo(minutes, 0);
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['00', '00', 'AM']);
+      expect(getModelState()).toEqual([0, 0]);
+    });
+
     it('updates hours & pads on input change & pads on blur', function() {
       var el = getHoursInputEl();
 
       changeInputValueTo(el, 5);
-      expect(getTimeState()).toEqual(['5', '40', 'PM']);
+      expect(getTimeState()).toEqual(['05', '40', 'PM']);
       expect(getModelState()).toEqual([17, 40]);
 
       el.blur();
@@ -730,7 +758,7 @@ describe('timepicker directive', function () {
       var el = getMinutesInputEl();
 
       changeInputValueTo(el, 9);
-      expect(getTimeState()).toEqual(['02', '9', 'PM']);
+      expect(getTimeState()).toEqual(['02', '09', 'PM']);
       expect(getModelState()).toEqual([14, 9]);
 
       el.blur();

src/timepicker/timepicker.js

@@ -188,10 +188,10 @@ angular.module('ui.bootstrap.timepicker', [])
   };
 
   // Call internally when we know that model is valid.
-  function refresh( keyboardChange ) {
+  function refresh() {
     makeValid();
     ngModelCtrl.$setViewValue( new Date(selected) );
-    updateTemplate( keyboardChange );
+    updateTemplate();
   }
 
   function makeValid() {
@@ -200,15 +200,15 @@ angular.module('ui.bootstrap.timepicker', [])
     $scope.invalidMinutes = false;
   }
 
-  function updateTemplate( keyboardChange ) {
+  function updateTemplate() {
     var hours = selected.getHours(), minutes = selected.getMinutes();
 
     if ( $scope.showMeridian ) {
       hours = ( hours === 0 || hours === 12 ) ? 12 : hours % 12; // Convert 24 to 12 hour system
     }
 
-    $scope.hours = keyboardChange === 'h' ? hours : pad(hours);
-    $scope.minutes = keyboardChange === 'm' ? minutes : pad(minutes);
+    $scope.hours = pad( hours );
+    $scope.minutes = pad( minutes );
     $scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
   }