javascript - Angular UI TimePicker doesn't work correctly -

i creating angular directive handle date time functionality. trying use angular's ui bootstrap getting strange error timepicker piece. show starting time (just defaulting current time) if try , click up/down arrows change time, show nan in both fields , when inspect date, says invalid date. following 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);                      }                  }              }          };      }  ]);

<div class="form-group">      <p class="input-group">          <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" />          <span class="input-group-btn">              <button type="button" class="btn btn-default" ng-click="opendate()"><i class="glyphicon glyphicon-calendar"></i></button>          </span>      </p>      <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"></uib-timepicker>  </div>

it seems i'm using example on site it's not working correctly , i'm not sure why.

there typo in line:

<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"></uib-timepicker> 

as wrote

hour-step="hstep" minute-step="mstep"

instead of

hour-step="hstep" minute-step="mstep"