title: angularjs ui-if state variable setting value async
body: <p>I would like to restrict the side bar until user login completed</p>
  
  <p>The side bar is outside the ui-view section</p>
  
  <p>I am assuming <code>authenticated</code> as a state variable</p>
  
  <pre><code>&lt;div ng-controller="MyController" ui-prevent-touchmove-defaults&gt;
      &lt;section style="height: 100%" layout="row" flex=""&gt;
          &lt;div ui-if="authenticated" ng-include="'pages/sidebar.html'"&gt;&lt;/div&gt;
          &lt;md-content id="container" style="overflow:hidden;height: 100%;padding: 0 0 0 0" ui-view flex=""&gt;&lt;/md-content&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In JavaScript code I have an initial value</p>
  
  <pre><code>SharedState.initialize($rootScope, "authenticated", false);
  </code></pre>
  
  <p>But when I call this method after login</p>
  
  <pre><code>SharedState.initialize($rootScope, "authenticated", true);
  </code></pre>
  
  <p>The UI is not appearing, how to achieve this, is there a trigger method to do re-render?</p>