title: AngularJS , passing object by reference in directive
body: <p>I want to build a customize checkbox by write a directive.</p>
  
  <pre><code>App.directive('preferredCheckBox', function() {
  return {
  restrict: 'E',
  require: '?ngModel',
  scope: {
      ngModel: '='
  },
  link: function(scope, elem,attrs){
      elem.bind('click', function() {
          scope.ngModel = !scope.ngModel;
  
          //alert("clicked");
      })
  },
  
  template: "&lt;div ng-if='ngModel'&gt; &lt;span class='ion-ios-star text-red' style='font-size:2em'&gt;&lt;/span&gt;&lt;/div&gt; " +
            "&lt;div ng-if='!ngModel'&gt; &lt;span class='ion-ios-star-outline text-red' style='font-size:2em'&gt;&lt;/span&gt;&lt;/div&gt;"
   }
  
  });
  </code></pre>
  
  <p>This is how I call the directive</p>
  
  <pre><code>&lt;preferred-check-box ng-model="item.isChecked"&gt;&lt;/preferred-check-box&gt;
  </code></pre>
  
  <p>The directive work fine for display purpose.
  But if I click on the checkbox, it doesn't change the value of "item.isChecked"</p>
  
  <p>In my opinion, inside the directive :</p>
  
  <pre><code> scope: {
          ngModel: '='
   },
  link: function(scope, elem,attrs){
      elem.bind('click', function() {
          scope.ngModel = !scope.ngModel;
  
          //alert("clicked");
      })
  },
  </code></pre>
  
  <p>It just clone another "item.isChecked" value into its own local scope, during trigger the click function, it doesn't change the original "item.isChecked".</p>
  
  <p>How can I handle this ? I want to pass ng-model by reference.</p>
  
  <p>Here is the link : <a href="http://jsfiddle.net/tanch/rd0b1n4b/7/" rel="nofollow">http://jsfiddle.net/tanch/rd0b1n4b/7/</a>
  When I click the text "checked", it should change to "unchecked", vice versa.</p>