title: Angular ng-show not working if parent has ng-if
body: <p>I have a view where a parent div has ng-if on it, and some child element has ng-show on it.  It seems that the ng-show isn't working correctly when nested under an element with ng-if on it.  Is this an Angular bug or am I doing something wrong?  <a href="http://plnkr.co/edit/CjO8Vhn9KO1hZthNZ2X2?p=preview">See this plunker</a>.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;!-- with ng-if on the parent div, the toggle doesn't work --&gt;
      &lt;div ng-if="true"&gt;
        &lt;div&gt;
            visibility variable: {{showIt}}
        &lt;/div&gt;
        &lt;div ng-show="!showIt"&gt;
            &lt;a href="" ng-click="showIt = true"&gt;Show It&lt;/a&gt;
        &lt;/div&gt;
        &lt;div ng-show="showIt"&gt;
          This is a dynamically-shown div.
          &lt;a href="" ng-click="hideIt()"&gt;Hide it&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;br/&gt;&lt;br/&gt;
  
      &lt;!-- with ng-show on the parent div, it works --&gt;
      &lt;div ng-show="true"&gt;
        &lt;div&gt;
            visibility variable: {{showIt}}
        &lt;/div&gt;
        &lt;div ng-show="!showIt"&gt;
            &lt;a href="" ng-click="showIt = true"&gt;Show It&lt;/a&gt;
        &lt;/div&gt;
        &lt;div ng-show="showIt"&gt;
          This is a dynamically-shown div.
          &lt;a href="" ng-click="hideIt()"&gt;Hide it&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The JavaScript:</p>
  
  <pre><code>scope.hideIt = function () {
    scope.showIt = false;
  };
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Andy</p>