title: Angular UI TimePicker doesn't work correctly
body: <p>I am creating an angular directive to handle some date time functionality. I am trying to use Angular's UI Bootstrap but I am getting a strange error with the TimePicker piece.  It will show my starting time (just defaulting to the current time) but if I try and click the up/down arrows to change the time, it show NaN in both fields and when I inspect the date, it says it is an invalid date. The following is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>utilisyncApp.directive("questionDateTime", [
      "$log",
      function ($log) {
          return {
              restrict: "E",
              templateUrl: "/app/directives/utilisyncItem/utilisyncQuestion/questionDateTime/questionDateTime.html",
              scope: {
                  item: '='
              },
              link: function ($scope, $element, $attrs) {
                  $scope.mStep = 1;
                  $scope.hStep = 1;
                  $scope.dateFormat = 'dd-MMM-yyyy'
                  $scope.popup = { isOpen: false };
                  $scope.dateTime = { time: new Date() };
  
                  $scope.openDate = openDate;
                  $scope.changed = changed;
  
  
                  init();
  
                  function init() {
                      if ($scope.item.question.defaultToCurrent) {
                          $scope.dateTime.date = new Date();
                      }
                  }
  
                  function openDate() {
                      $scope.popup.isOpen = true;
                  }
  
                  function changed() {
                      var date = $scope.dateTime.date;
                      var time = $scope.dateTime.time;
                      if ($scope.item.question.includeTime) {
                          $scope.item.value = new Date(date.getFullYear(), date.getMonth(), date.getDay(), time.getHours(), time.getMinutes(), 0);
                      }
                      else {
                          $scope.item.value = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0);
                      }
                  }
              }
          };
      }
  ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
      &lt;p class="input-group"&gt;
          &lt;input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="dateTime.date" ng-change="changed()" is-open="popup.isOpen" datepicker-options="dateOptions" close-text="Close" /&gt;
          &lt;span class="input-group-btn"&gt;
              &lt;button type="button" class="btn btn-default" ng-click="openDate()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/span&gt;
      &lt;/p&gt;
      &lt;uib-timepicker ng-if="item.question.includeTime" ng-model="dateTime.date" readonly-input="true" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="true"&gt;&lt;/uib-timepicker&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It seems like I'm using it almost exactly like the example on their site but it's not working correctly and I'm not sure why.</p>