title: Using ng-if inside <li> in angular-js
body: <p>I am trying to use ng-if inside <li> based on a property value stored in my local system. </p>
  
  <pre><code>&lt;div class="col-sm-3 col-md-2 sidebar"&gt;
      &lt;ul class="nav nav-sidebar"&gt;
          &lt;li ng-class="{ 'active': $state.current.name.indexOf('home') != -1 }"&gt;
              &lt;a ui-sref="home"&gt;Overview&lt;/a&gt;
          &lt;/li&gt;
          &lt;li ng-class="{ 'active': $state.current.name.indexOf('organization') != -1 }"&gt;
              &lt;a ui-sref="organizations"&gt;Organizations&lt;/a&gt;
          &lt;/li&gt;
          &lt;li ng-if="appConfig.flag" ng-class="{ 'active': $state.current.name.indexOf('ApplicationTemp') != -1 }"&gt;
              &lt;a ui-sref="ApplicationTemp"&gt;Applications Temp&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Now, this flag is declared in my app.config.js as a flag as follows: </p>
  
  <pre><code>if (__LOCAL__) {
      appConfig.flag = true;
  }
  </code></pre>
  
  <p>My Controller for the navbar is as follows: </p>
  
  <pre><code>import appConfig from './../../app.config';
  export default function SideBarController() {
      'ngInject';
      var self = this;
  
      self.initialize = _initialize;
      self.initialize();
  
      //Private Functions
      function _initialize() {
          self.endpoints = appConfig.endpoints;
          self.isProd = appConfig.isProd;
      }
  
  }
  </code></pre>
  
  <p>The word <code>LOCAL</code> basically is used for running the above system on my local system using npm scripts. 
  The problem is, I can't use this in my sidebar and use it in my if condition properly. The result is, ApplicationTemp is always hidden when I apply this ng-if condition. Is there anything I am missing? </p>