title: AngularJS and contentEditable two way binding doesn't work as expected
body: <p>Why in the following example the initial rendered value is <code>{{ person.name }}</code> rather than <code>David</code>? How would you fix this?</p>
  
  <p><a href="http://plnkr.co/edit/orz6XK?p=preview" rel="noreferrer">Live example here</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-controller="MyCtrl"&gt;
    &lt;div contenteditable="true" ng-model="person.name"&gt;{{ person.name }}&lt;/div&gt;
    &lt;pre ng-bind="person.name"&gt;&lt;/pre&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>app.controller('MyCtrl', function($scope) {
    $scope.person = {name: 'David'};
  });
  
  app.directive('contenteditable', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl) {
        // view -&gt; model
        element.bind('blur', function() {
          scope.$apply(function() {
            ctrl.$setViewValue(element.html());
          });
        });
  
        // model -&gt; view
        ctrl.$render = function() {
          element.html(ctrl.$viewValue);
        };
  
        // load init value from DOM
        ctrl.$setViewValue(element.html());
      }
    };
  });
  </code></pre>