javascript - angular (jquery timepicker) unable to get value of input -

i want make custom directive jquery plugin timepicker. i'm not getting input value in console, says undefined.

here's plunkr

<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"   ng-model="dup_row1 " size=6 timepicki/>         {{dup_row1}}       </td>     </tr>    </tbody> </table> 

---

var app = angular.module('myapp', []); app.directive('timepicki', [    function() {     var link;     link = function(scope, element, attr, ngmodel) {       element.timepicki();     };      return {       restrict: 'a',       link: link,       require: 'ngmodel'     };   } ]) app.controller('ctrl', function($scope) {   $scope.row1 = "00:00"    $scope.submit=function(){     console.log($scope.dup_row1)   } }); 

the code you've posted not same code in plunker.

the angularjs developer guide says;

use controllers to:

• set initial state of $scope object.

in example above, log value of $scope.dup_row1 on submit, controller never sets value, , such undefined.

the following print "hello" console;

app.controller('ctrl', function($scope) {   $scope.row1 = "00:00"   $scope.dup_row1 = "hello"    $scope.submit=function(){     console.log($scope.dup_row1)   } });