title: AngularJS - How to use ng-if without HTML element
body: <p>Is there a way to tell AngularJS not to display the top HTML element which has <strong>ng-if</strong> directive. I want angular to display child content only.</p>
  
  <p><strong>Angular Code:</strong></p>
  
  <pre><code>    &lt;div ng-if="checked" id="div1"&gt;
        &lt;div id="div2"&gt;ABC&lt;/div&gt;
        &lt;div id="div3"&gt;KLM&lt;/div&gt;
        &lt;div id="div4"&gt;PQR&lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>Rendered HTML:</strong></p>
  
  <pre><code>   &lt;div id="div1"&gt; 
        &lt;div id="div2"&gt;ABC&lt;/div&gt;
        &lt;div id="div3"&gt;KLM&lt;/div&gt;
        &lt;div id="div4"&gt;PQR&lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>What I want:</strong></p>
  
  <pre><code>   &lt;div id="div2"&gt;ABC&lt;/div&gt;
     &lt;div id="div3"&gt;KLM&lt;/div&gt;
     &lt;div id="div4"&gt;PQR&lt;/div&gt;
  </code></pre>
  
  <p>Here is a fiddle. <a href="http://jsfiddle.net/9mgTS/" rel="noreferrer">http://jsfiddle.net/9mgTS/</a>. I do not want <code>#div1</code> in HTML. I just want <code>#div2,3,4</code> if <code>checked</code> is <code>true</code>.</p>
  
  <p>A possible solution can be adding ng-if to all child elements but I do not want to do this.</p>