title: Accessing AngularJs Controller properties from the root node ng-if
body: <p>I want to access the angular controller property from the same tag where <code>ng-controller</code> is defined and hide the tag using <code>ng-if</code> if the property <code>languages</code> is having less than one element. </p>
  
  <p>To be precise this is what my <strong>not working code</strong> looks like:</p>
  
  <pre><code>&lt;li ng-controller="LanguageController" ng-if="languages.length &gt; 1"&gt;
      ...
  &lt;/li&gt;
  </code></pre>
  
  <p>But if I do something like this then <strong>it works</strong>.</p>
  
  <pre><code>&lt;li ng-controller="LanguageController"&gt;
      &lt;div ng-if="languages.length &gt; 1"&gt;...&lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>When I try this </p>
  
  <pre><code>&lt;li ng-controller="LanguageController" data-val="{{languages.length}}"&gt;
  ...
  </code></pre>
  
  <p>The output is <code>... data-val="1"..</code> which means </p>
  
  <blockquote>
    <p>I can access the properties in the root element itself</p>
  </blockquote>
  
  <p>To add to it, it also works when I use <code>ng-show</code> to hide my root element. Thanks to @sarjan-desai.
  <hr/>
  <strong>Question :</strong> But still why doesn't the <code>ng-if</code> work and remove my root <code>li</code> object, while the ng-show works?</p>