javascript - angular (jquery timepicker) is unable to detect changes -

im new angular , while doing small exercise, struck , wanted enable ng-show depending upon previous row timings , time input through jquery timepicker, angular unable read value of timepicker show next row

my code shown below

<table class="table table-bordered">   <thead>     <tr>       <th>time from</th>       <th>time to</th>     </tr>   </thead>   <tbody>     <tr>       <td>         <input type="text" ng-model="row1" size=6/ disabled>       </td>       <td>         <input type="text" id="timepicker1" ng-model="dup_row1 " size=6/>       </td>     </tr>     <tr ng-show="show_row2()">       <td>         <input type="text" ng-model="dup_row1" size=6/>       </td>       <td>         <input type="text" ng-model="dup_row2" size=6/>       </td>     </tr>   </tbody> </table> 

and script code

var app = angular.module('myapp', []); app.controller('ctrl', function($scope) {   $scope.row1 = "00:00"   $scope.show_row2 = function() {     if (($scope.dup_row1 && $scope.dup_row1.substring(0, 2) < 24)) {       return true     }   } $('#timepicker1').timepicki(); 

any appreciated. in advance

my plunker link

load jquery before angularjs avoid compiling dom again jquery $

you should play dom using directive if using jquery plugin. create own directive create timepicki element.

directive

app.directive('timepicki', [    function() {     var link;     link = function(scope, element, attr, ngmodel) {       element.timepicki();     };      return {       restrict: 'a',       link: link,       require: 'ngmodel'     };   } ]) 

working plunkr