AngularJS : Why ng-model value not updating in scope variable

Question

I am using jquery timepicker plugin and its angular directive. When I reset the the scope values from javascript then for the same time scope value not updating.

I have tried to make changes on timepicker directive file but not succeeded.

Example:- Select start-time 1:00AM then end-time automatically sets to 1:15AM which is updated from watch function in JS file. Now click Reset and values would be deleted or input fields would be blank. Now again select the same time 1:00AM the end-time is not filled automatically and also Reset does not work.

But that works If I change the time other than the previously selected time.

Problem:- After reset value in input field looks populated but that is not updating on the angular scope or model. But if I check that value through document.getElementById() function then it is displaying me that value which is inside that input field. Then why those value are not updating in angular scope.

Requirement:- I want to empty the fields after user click on reset. and for the second time when user select the "same time" the value should be updated in angular scope and model.

Code:-

 var app = angular.module('timePicker', ['ui.timepicker']);

app.controller('DemoCtrl',function($scope){
//$scope.startTime = new Date();
$scope.$watch('startTime', function (newValues, oldValues, scope) 
    {

        if( ($scope.startTime != undefined) &&  ($scope.startTime != null) && ($scope.startTime != '') )
            {
                $scope.endTime =  new Date($scope.startTime.getTime() + (15*60*1000));

                console.log($scope.startTime);
                console.log($scope.endTime);
            }   

    });

$scope.$watch('scope', function (newValues, oldValues, scope) 
    {
        console.log("Nothing here");
    });

$scope.resetTime = function()
{
  $scope.startTime = undefined;
  $scope.endTime = undefined;

}


});

My Plnker:-Plnker

Resources Used:-

https://github.com/jonthornton/jquery-timepicker whose directive in angular is on https://github.com/Recras/angular-jquery-timepicker.

Answer 1

Problem

You cant use $scope.$watch for this condition, because the $scope.$watch is calling for whenever the $scope.startTime value is changed, If you select $scope.startTime value is a previous value, then this below code is not called.This is why you got this problem

if( ($scope.startTime !== undefined) &&  ($scope.startTime !== null) && ($scope.startTime !== '') )
                {
                    $scope.endTime =  new Date($scope.startTime.getTime() + (15*60*1000));

                    console.log($scope.startTime);
                    console.log($scope.endTime);
                }   

Review

This issue only happen with your previous value.Once you change any other value then it's working good.

Solution

You need change to ng-blur instead of $scope.$watch in your first text field.

Fixed Demo

I have solved your issue by using ng-blur. Please see this Plunker

also my demo have working your reset functionality :) good luck

Answer 2

I resolved this problem using this code for reset

angular.element('#elementId').timepicker('setTime', null);

With this code, model value also updates with previous value.