title: AngularJs ng-if is not working for nested ng-if
body: <p>In the code below the 2nd checkbox does not work when the 1st checkbox is clicked. </p>
  
  <p><a href="http://plnkr.co/edit/JF0IftvWx7Ew3N43Csji?p=preview">http://plnkr.co/edit/JF0IftvWx7Ew3N43Csji?p=preview</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html ng-app="App"&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="animations.css" /&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
           Click me: &lt;input type="checkbox" ng-model="checked" ng-init="checked=true" /&gt;&lt;br/&gt;
           Show when checked:
           &lt;span  ng-if="checked==true" class="animate-if"&gt;
               &lt;input type="checkbox" ng-model="checked1" ng-init="checked1=true" /&gt;
           &lt;/span&gt;
           &lt;br&gt;
           &lt;span  ng-if="checked1==true" class="animate-if"&gt;
            test &lt;input type="checkbox" ng-model="checked2" ng-init="checked2=true" /&gt;
           &lt;/span&gt;
       &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>