title: How can I pass a model into custom directive
body: <p>My goal is to pass the projectName model from my MainController to my custom contenteditable directive.</p>
  
  <p>I have the following controller:</p>
  
  <pre><code>app.controller("MainController", function($scope){
      $scope.projectName = "Hot Air Balloon";
  });
  </code></pre>
  
  <p>Here is how I'm calling the directive:</p>
  
  <pre><code>&lt;div class="column" ng-controller="MainController"&gt;
      &lt;h2 contenteditable name="myWidget" ng-model="projectName" strip-br="true"&gt;&lt;/h2&gt;
      &lt;p&gt;{{projectName}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've gotten the contenteditable directive working by following this tutorial: <a href="https://docs.angularjs.org/api/ng/type/ngModel.NgModelController" rel="nofollow">https://docs.angularjs.org/api/ng/type/ngModel.NgModelController</a></p>
  
  <p>If I understand the docs correctly then Angular is not going to use the model I want it to.  Instead its going to create a new model w/ scope local to the contenteditable directive.  I know that I can add an isolate scope to the directive but I don't know how to use the model passed to the isolate scope within the link function.</p>
  
  <p>I have tried something like the following which didn't work ...</p>
  
  <pre><code>&lt;h2 contenteditable item="projectName"&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>--- directive code ---</p>
  
  <pre><code>scope: {
      item: '=item'
  }
  
  link: function(){
      ...
      item.$setViewValue(...)
      ...
  }
  </code></pre>
  
  <p>--- my original directive call --</p>
  
  <pre><code>&lt;div class="column" ng-controller="MainController"&gt;
      &lt;h2 contenteditable name="myWidget" ng-model="projectName" strip-br="true"&gt;&lt;/h2&gt;
      &lt;p&gt;{{projectName}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>--- my original controller and directive ---</p>
  
  <pre><code>app.controller("MainController", function($scope){
      $scope.projectName = "LifeSeeds";
  });
  
  app.directive('contenteditable', function(){
      return {
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, element, attrs, ngModel){
              console.log(ngModel);
  
              if(!ngModel) return;
  
              console.log(ngModel.$viewValue);
  
              ngModel.$render = function(){
                  element.html(ngModel.$viewValue || '');
              };
  
              element.on('blur keyup change', function(){
                  scope.$apply(read);
              });
              read();
  
              function read(){
                  var html = element.html();
                  if(attrs.stripBr &amp;&amp; html == '&lt;br&gt;'){
                      html = '';
                  }
                  ngModel.$setViewValue(html);
              }
  
          }
      };
  });
  </code></pre>