Use angular-ui timepicker as input form

Question

I'm using angular-ui timepicker according to the example here. This is my HTML:

<timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker>

In the js file, I'm trying to get the value with

var start_hour = {
            hour:new Date($scope.hour).getHours(),
            min:new Date($scope.hour).getMinutes()
        };

But it's only works if I set a new date in JS and I can't get the time inputted in the page. Want I want is to use the timepicker as a input to allow a filter based on the date but also in the time. I googled a lot for this, but I couldn't find anything

Just FIY, this is my complete HTML with datepicker where I get the date (this is works fine):

<div class="col-md-2">
        <label for="InitialDate">Date:</label>
        <div id="InitialDate" class="input-group">
            <input type="text" name="Initial" data-datepicker-popup="yyyy/MM/dd" data-ng-model="date"
                   data-is-open="datepickers.date" data-datepicker-options="dateOptions" data-date-disabled="disabled(date, mode)" data-ng-required="true"/>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" data-ng-click="open($event)"><i class="fa fa-calendar"></i></button>
            </span>
        </div>
        <timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker>
    </div>

Answer 1

The error in this case was caused by a error in the changed() function.

With this function in the controller, all works fine:

$scope.changed = function () {
      $scope.start_hour = {
        hour: $scope.hour.getHours(),
        min: $scope.hour.getMinutes()
        };  
    };

Answer 2

You can use $scope.$watch: scope documentation

$scope.$watch('hour', function(newValue) {
   $scope.start_hour = {
        hour:new Date(newValue).getHours(),
        min:new Date(newValue).getMinutes()
    };  
});

Every time that the hour value changes, angular will call that function and update your start_hour variable.