title: Why ng-hide doesn't work with custom directives?
body: <p>I'm reading the directives section of the developers guide on angularjs.org to refresh my knowledge and gain some insights and I was trying to run one of the examples but the directive ng-hide is not working on a custom directive.</p>
  
  <p>Here the jsfiddle: <a href="http://jsfiddle.net/D3Nsk/" rel="nofollow noreferrer">http://jsfiddle.net/D3Nsk/</a>:</p>
  
  <pre><code>&lt;my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()"&gt;
    Does Not Work Here!!!
  &lt;/my-dialog&gt;
  &lt;div ng-hide="dialogIsHidden"&gt;
         It works Here.
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea on why this is happening?</p>
  
  <p><strong>Solution</strong></p>
  
  <p>Seems that the variable dialogIsHidden on the tag  already make a reference
  to a scope variable inside the directive and not to the variable in the controller; given
  that the directive has it's own insolated scope, to make this work it's necesary to pass
  by reference the variable dialogIsHidden of the controller to the directive.</p>
  
  <p>Here the jsfiddle:
  <a href="http://jsfiddle.net/h7xvA/" rel="nofollow noreferrer">http://jsfiddle.net/h7xvA/</a></p>
  
  <p>changes at:</p>
  
  <pre><code> &lt;my-dialog 
       ng-hide="dialogIsHidden" 
       on-close="hideDialog()" dialog-is-hidden='dialogIsHidden'&gt;
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>  scope: {
      'close': '&amp;onClose',
      'dialogIsHidden': '='
    },
  </code></pre>