Use set date functionality to update time variable on change in time directive.

Author: g1eb

src/time-input.html

@@ -11,21 +11,21 @@
     </div>
     <div class="timer">
       <div class="timer-hours">
-        <div class="arrow arrow-up" ng-click="selected.add(1, 'hours') && onChange()"></div>
+        <div class="arrow arrow-up" ng-click="setDate(selected.clone().add(1, 'hours'))"></div>
         {{ selected.format('HH') }}
-        <div class="arrow arrow-down" ng-click="selected.subtract(1, 'hours') && onChange()"></div>
+        <div class="arrow arrow-down" ng-click="setDate(selected.clone().subtract(1, 'hours'))"></div>
       </div>
       <div class="timer-divider">:</div>
       <div class="timer-minutes">
-        <div class="arrow arrow-up" ng-click="selected.add(1, 'minutes') && onChange()"></div>
+        <div class="arrow arrow-up" ng-click="setDate(selected.clone().add(1, 'minutes'))"></div>
         {{ selected.format('mm') }}
-        <div class="arrow arrow-down" ng-click="selected.subtract(1, 'minutes') && onChange()"></div>
+        <div class="arrow arrow-down" ng-click="setDate(selected.clone().subtract(1, 'minutes'))"></div>
       </div>
       <div class="timer-divider">:</div>
       <div class="timer-seconds">
-        <div class="arrow arrow-up" ng-click="selected.add(1, 'seconds') && onChange()"></div>
+        <div class="arrow arrow-up" ng-click="setDate(selected.clone().add(1, 'seconds'))"></div>
         {{ selected.format('ss') }}
-        <div class="arrow arrow-down" ng-click="selected.subtract(1, 'seconds') && onChange()"></div>
+        <div class="arrow arrow-down" ng-click="setDate(selected.clone().subtract(1, 'seconds'))"></div>
       </div>
     </div>
     <div class="clear-button" ng-if="!!time">

src/time-input.js

@@ -28,6 +28,20 @@ directive('timeInput', ['$document', function ($document) {
             }
           };
 
+          // Update selected time
+          scope.setDate = function (datetime, calendar_update) {
+            if ( scope.selected.isSame(datetime) ) { return; }
+            if ( !datetime ) {
+              scope.selected = scope.time = undefined;
+            } else {
+              scope.selected.year(datetime.year()).month(datetime.month()).date(datetime.date()).hours(datetime.hours()).minutes(datetime.minutes()).seconds(datetime.seconds());
+            }
+            if ( !scope.time ) {
+              scope.time = scope.selected;
+            }
+            scope.onChange();
+          };
+
           // Convert time object to moment.js if its not a moment object yet
           if ( scope.time && !scope.time._isAMomentObject ) {
             scope.time = moment(scope.time);