title: How to detect input element change when set value in angularjs
body: <p>online code:</p>
  
  <p><a href="http://jsfiddle.net/mb98y/309/">http://jsfiddle.net/mb98y/309/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app="myDirective" ng-controller="x"&gt;
      &lt;input id="angular" type="text" ng-model="data.test" my-directive&gt;
  &lt;/div&gt;
      &lt;button onclick="document.querySelector('#angular').value = 'testg';"&gt;click&lt;/button&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>angular.module('myDirective', [])
      .directive('myDirective', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              scope.$watch(attrs.ngModel, function (v) {
                  //console.log('value changed, new value is: ' + v);
                  alert('value change: ' + scope.data.test);
              });
          }
      };
  });
  
  function x($scope) {
      //$scope.test = 'value here';
      $scope.data = {
          test: 'value here'
      }
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mb98y/310/">http://jsfiddle.net/mb98y/310/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app="myDirective" ng-controller="x"&gt;
  &lt;input id="angular" type="text" my-directive="test"&gt;{{test}}&lt;/div&gt;
  &lt;button onclick="document.querySelector('#angular').value =  'testg';"&gt;click&lt;/button&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>angular.module('myDirective', [])
      .directive('myDirective', function () {
      return {
          restrict: 'A',
          scope: {
              myDirective: '='
          },
          link: function (scope, element, attrs) {
              // set the initial value of the textbox
              element.val(scope.myDirective);
              element.data('old-value', scope.myDirective);
  
              // detect outside changes and update our input
              scope.$watch('myDirective', function (val) {
                  element.val(scope.myDirective);
              });
  
              // on blur, update the value in scope
              element.bind('propertychange keyup change paste', function (blurEvent) {
                  if (element.data('old-value') != element.val()) {
                      console.log('value changed, new value is: ' + element.val());
                      scope.$apply(function () {
                          scope.myDirective = element.val();
                          element.data('old-value', element.val());
                      });
                  }
              });
          }
      };
  });
  
  function x($scope) {
      $scope.test = 'value here';
  }
  </code></pre>
  
  <p>I wanna click button to set input element value and angularjs(ng-model or scope object) can get it.</p>
  
  <p>But, <code>document.querySelector('#angular').value =  'testg';</code> </p>
  
  <p>change element value in this way, Neither angularjs $watch nor bind function can get value change event. If you input some words in input element by keyboard, they both works.</p>
  
  <p>How can I detect input element value change when set value in this way in angularjs?</p>