title: ngHide/ngShow using $rootScope in Single Page Application
body: <p>Reaching out to you all for help yet again for AngularJS. I'm building a SPA where my Layout (master) Page is divided in to three section left navigation bar, center content, right item list bar. My right item list should be hidden when I load my home page, but should be visible in the remaining screens. I've created a $rootScope variable in the homeController and setting the value to 'true' based on the location path and using that variable in the template to set the value to ngHide. When I navigate to a different page as I'm using SPA, my right and left bars won't be loaded again, only my center content do which is a new view. While loading the new view in the controller that is sending the data to the new view's template I'm resetting the $rootScope variable that I've created in homeController to 'false', but my right bar is still not visible. I could see that ng-hidden class is still on though the interpollation has updated the value to 'true'. Any suggestions would be highly appreciated.</p>
  
  <p>markup from layout page:</p>
  
  <pre><code>&lt;aside class="right_bar" ng-hide="{{$root.show}}"&gt;
          &lt;div class="my-list"&gt;&lt;span class="f3"&gt;My Cart&lt;/span&gt;&lt;div class=""&gt;&lt;span class="list-count"&gt;0&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="list-item"&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;
      &lt;/aside&gt;  
  </code></pre>
  
  <p>homeController code: </p>
  
  <pre><code>    function getHomeConfigsCtrl($http, $location, $rootScope) {
  
       $rootScope.show = false;
  
      var loc = $location.path();
  
      if (loc === '/Home/Index' || loc ==='')
      {
          $rootScope.show = true;
      }
     }
  </code></pre>
  
  <p>Categories Controller code: This is where I'm resetting my $rootScope variable's value</p>
  
  <pre><code>function getAllCategoryDetails($routeParams,$rootScope) {
      $rootScope.show = false;
  }
  </code></pre>