title: ngModel $formatters not being invoked
body: <p>I'm wondering why my $parsers are being invoked but my $formatters are not being invoked.  I modified the plunker in <a href="https://docs.angularjs.org/api/ng/type/ngModel.NgModelController" rel="nofollow">Custom Control Example</a> to include $parsers and $formatters.  It looks like my $parsers are being invoked but my $formatters are not being invoked.  Am I using $parsers and/or $formatters incorrectly?  Here is my modified plunker: <a href="http://plnkr.co/edit/o1EM05AtDGw2OMDwv9dR" rel="nofollow">http://plnkr.co/edit/o1EM05AtDGw2OMDwv9dR</a>.</p>
  
  <pre><code>angular.module('customControl', ['ngSanitize']).
    directive('contenteditable', ['$sce', function($sce) {
      return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController
        link: function(scope, element, attrs, ngModel) {
          if (!ngModel) return; // do nothing if no ng-model
  
          // Specify how UI should be updated
          ngModel.$render = function() {
            element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
          };
  
          ngModel.$parsers.push(function (viewValue) {
            console.log("parsing");
            return viewValue + "_extra_model_stuff";
          });
  
          ngModel.$formatters.push(function (modelValue) {
            console.log("never formats : (");
            return modelValue + "_formatted_view_stuff";
          });
  
          // Listen for change events to enable binding
          element.on('blur keyup change', function() {
            scope.$apply(read);
          });
          read(); // initialize
  
          // Write data to the model
          function read() {
            var html = element.html();
            // When we clear the content editable the browser leaves a &lt;br&gt; behind
            // If strip-br attribute is provided then we strip this out
            if ( attrs.stripBr &amp;&amp; html == '&lt;br&gt;' ) {
              html = '';
            }
            ngModel.$setViewValue(html);
          }
        }
      };
    }]);
  </code></pre>
  
  <p>After a closer inspection of angular.js, it looks like ctrl refers to an ngModelController.  I expected it to refer to the ngModelController I was appending formatters to.  However, it ctrl.$formatters is an empty array, so this must be a different ngModelController.  I don't understand why.</p>
  
  <pre><code>$scope.$watch(function ngModelWatch() {
    var modelValue = ngModelGet();
  
    // if scope model value and ngModel value are out of sync
    // TODO(perf): why not move this to the action fn?
    if (modelValue !== ctrl.$modelValue) {
      ctrl.$modelValue = modelValue;
  
      var formatters = ctrl.$formatters,
          idx = formatters.length;
  
      var viewValue = modelValue;
      while(idx--) {
        viewValue = formatters[idx](viewValue);
      }
      if (ctrl.$viewValue !== viewValue) {
        ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
        ctrl.$render();
  
        ctrl.$$runValidators(undefined, modelValue, viewValue, noop);
      }
    }
  
    return modelValue;
  });
  </code></pre>