angular (jquery timepicker) unable to get value of input

Question

I want to make a custom directive with the jquery plugin timepicker. I'm not getting the input value in the console, it says undefined.

here's a 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)
  }
});

Answer 1

The code you've posted is not the same as the code in your plunker.

The AngularJS Developer Guide says;

Use controllers to:

• Set up the initial state of the $scope object.

In your example above, you log the value of $scope.dup_row1 on submit, but your controller never sets that value, and as such it is undefined.

The following will print "hello" to the console;

app.controller('ctrl', function($scope) {
  $scope.row1 = "00:00"
  $scope.dup_row1 = "hello"

  $scope.submit=function(){
    console.log($scope.dup_row1)
  }
});