title: AngularJS prevent ngModel sync
body: <p>I have a simple directive called <code>po-datepicker</code>, it displays a datepicker on the screen, but allows the user to type a date manually:</p>
  
  <pre><code>&lt;input type="text" ng-model="model" po-datepicker required /&gt;
  </code></pre>
  
  <p>and this is the directive:</p>
  
  <pre><code>myApp.directive('poDatepicker', function () {
      return {
          require: ['?^ngModel'],
          restrict: 'A',
          link: function ($scope, elem, attrs, ctrl) {
              var ngModel = ctrl[0];
              var picker = elem.datepicker();
  
              picker.on('changeDate', function(e) {
                  ngModel.$setViewValue(e.date);
                  ...
              });
  
              elem.parent().find('button').on('click', function() {
                  picker.datepicker('show');
              });
  
              var changeFn = function(e) {
                  // Here I have some logic that calls $setViewValue();
              };
  
              picker.on('hide', changeFn);
              elem.on('keyup blur', changeFn);
          }
      };
  });
  </code></pre>
  
  <p>this works as expected, but when I try to type a value in the input, it updates the ngModel, changing the variable in the scope, how can I prevent ngModel from being changed in the input?</p>
  
  <p><a href="http://plnkr.co/edit/ZxvglPYwX95ufXN4IbdN?p=preview" rel="nofollow">Here is a plunkr</a>, try manually writing a value and you'll understand what I'm talking.</p>