title: ng-change on input with controller as syntax not working
body: <p>I am using $watch for triggering changes for input or select tags. Everything is working fine but want to refactor so instead of watchers to use ng-change directive. For select tags is working but for input type it is now working, function is not getting called.</p>
  
  <p><strong>Input view</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;input date-range-picker  type="text" ng-model="reviewvm.review.extDate" 
      ng-change="reviewvm.changed(reviewvm.review.extDate)" 
  options="{locale:{format: 'MM/DD/YYYY'}, singleDatePicker:true}" /&gt;
      &lt;span data-ng-click="reviewvm.openExitConfDatePicker()"&gt;
          &lt;i class="icon-calendar"&gt;&lt;/i&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Select view</strong></p>
  
  <pre><code>&lt;select ng-change="reviewvm.agencyChanged(reviewvm.agency)" 
  data-ng-model="reviewvm.agency" data-ng-options="agency as agency.agencyName for agency in reviewvm.refAgencies track by agency.id""&gt;
      &lt;option value=""&gt;Select {{reviewvm.area}} Department or Agency&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>Function</strong></p>
  
  <pre><code>reviewvm.changed = changed;
  
  function changed(current, original) {
      console.log(current + " - " + original);
  }
  
  function agencyChanged(current, original) { 
      console.log(current + " - " + original);
  }
  </code></pre>
  
  <p>As I said same approach for select and input, but for input it does not go inside function changed....</p>
  
  <p><strong>Plunker</strong></p>
  
  <p><a href="https://plnkr.co/edit/STyQT4SivGuAdzy5ADGl?p=preview" rel="nofollow">https://plnkr.co/edit/STyQT4SivGuAdzy5ADGl?p=preview</a></p>
  
  <p><strong>Update</strong></p>
  
  <pre><code>&lt;div data-ng-class="{'not-allowed input-group' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group' : reviewvm.userReviewAssoc}" data-ng-show="reviewvm.review.actualStartDt"&gt;
                          &lt;input id="extConfDate" class="form-control date-picker" date-range-picker data-ng-disabled="!reviewvm.userReviewAssoc || !reviewvm.editMode" type="text"
                                 ng-model="reviewvm.review.exitConfDt" ng-change="reviewvm.exitConfChanged(reviewvm.review.exitConfDt)"
                                 min="reviewvm.review.actualStartDt" max="reviewvm.currDate" placeholder="mm/dd/yyyy" options="{locale:{format: 'MM/DD/YYYY'}, singleDatePicker:true}" /&gt;
                          &lt;span data-ng-class="{'not-allowed input-group-addon' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group-addon' : reviewvm.userReviewAssoc}" data-ng-click="reviewvm.openExitConfDatePicker()"&gt;
                              &lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/div&gt;
  
  
  function exitConfChanged(current, original) {
              console.log(current)
          }
  </code></pre>
  
  <p>This is how I got to work for dropdown with current and original:</p>
  
  <pre><code>ng-change="reviewvm.reviewTypeChanged(reviewvm.review.reviewType, '{{reviewvm.review.reviewType}}')"
  </code></pre>
  
  <p>and then in controller:</p>
  
  <pre><code>function reviewTypeChanged(original, current) {
     if (original !== "") {
                  original = angular.fromJson(original);
     }
  console.log(original + " - " + current);
  }
  </code></pre>
  
  <p>And this is working fine for all dropdown lists I am getting current and previous selected but for inputs not...</p>
  
  <p>I think that maybe it is not going inside function cause of this error form angular-daterangepicker:</p>
  
  <pre><code>TypeError: Cannot read property 'startDate' of null
      at Array.&lt;anonymous&gt; (angular-daterangepicker.js:93)
      at Object.ngModelWatch (angular.js:23555)
      at Scope.$digest (angular.js:14404)
      at Scope.$apply (angular.js:14675)
      at done (angular.js:9725)
      at completeRequest (angular.js:9915)
      at XMLHttpRequest.requestLoaded (angular.js:9856)(anonymous function) @ angular.js:11706(anonymous function) @ angular.js:8619$digest @ angular.js:14430$apply @ angular.js:14675done @ angular.js:9725completeRequest @ angular.js:9915requestLoaded @ angular.js:9856
  </code></pre>
  
  <p>but don't know how to fix it cause I was searching on internet many people have same error and still no fix...</p>