title: ngModel doesn't work in the custom directive
body: <p>I knew definitely it is problem I didn't understand the scope of AngularJs well. I had to committed it is hard for me. So I post a example here, Hope someone help me to get it more clear. Thanks.</p>
  
  <p><strong>Html Part</strong></p>
  
  <pre><code>&lt;test-Area ng-model="testModel.text"&gt;&lt;/test-Area&gt;
  &lt;input type="text" ng-model="testModel.text"&gt;&lt;/input&gt;
  &lt;textarea ng-model="testModel.text"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p><strong>JS Part</strong></p>
  
  <pre><code>app.controller('AppController', function ($scope, $log) {
      $scope.testModel={text:"123"};
  })
  
  app.directive('testArea',function() {
      var textareaInputDir = {};
      textareaInputDir.restrict="E";
      textareaInputDir.replace="true";
      textareaInputDir.template="&lt;div&gt;&lt;textarea &gt;&lt;/textarea&gt;&lt;label&gt;&lt;small&gt;&lt;/small&gt;&lt;span &gt;*&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;";
      textareaInputDir.require="ngModel";
      textareaInputDir.link=function (scope, jqElement, attrs,ngModelCtrl) {
          scope.backgroundValue={text:''};
          ngModelCtrl.$render = function () {
              jqElement.find('textarea').text(ngModelCtrl.$viewValue);
              scope.backgroundValue.text=ngModelCtrl.$viewValue;
          }
          //get the textarea element
          var txtAreaElement = jqElement.find('textarea');
          //listen for the change event
  
          txtAreaElement.bind('keyup', function(){
              if (scope.$$phase) return;
              scope.$apply(function () {
                  var bgVal=angular.isString(ngModelCtrl.$viewValue) ? ngModelCtrl.$viewValue : '';
                  scope.backgroundValue.text=bgVal;
                  ngModelCtrl.$setViewValue(bgVal);
              });
  
          });
          scope.$watch('backgroundValue.text',function()
          {
              ngModelCtrl.$setViewValue(scope.backgroundValue.text)
          });
      };
      return textareaInputDir;
  });
  </code></pre>
  
  <p>Please review what I had done so far in the <a href="http://jsfiddle.net/malaikuangren/5Qmn8/2/" rel="nofollow">fiddle</a>.</p>
  
  <p>I was trying to implement a two ways binding for my directive <code>testArea</code> and others. But I can't figure out why it doesn't work in my directive? </p>
  
  <p><strong>Updated</strong></p>
  
  <p>I changed the code a little bit. but still have problem. if I changed the value of text area. the 2 ways binding will be lost...</p>
  
  <pre><code>txtAreaElement.bind('keyup', function(){
              if (scope.$$phase) return;
              scope.$apply(function () {
                  var txtAreaElement = jqElement.find('textarea');        
                  var bgVal=txtAreaElement[0].value;
                  scope.backgroundValue.text=bgVal;
                  ngModelCtrl.$setViewValue(bgVal);
  
              });
  
          });
  </code></pre>