title: angularjs show sidebar on some routes and hide in others
body: <p>I'm trying to utilize ng-if to include side bar in some of my singlepage app pages and hide it from other. the html is :</p>
  
  <pre><code>&lt;body ng-app="simpleapp"&gt;
          &lt;div id="wrapper"&gt;
              &lt;!-- Navigation --&gt;
  
              &lt;div ng-include="'./include/sidebar.html'"&gt;&lt;/div&gt;
  
              &lt;!-- Page Content --&gt;
              &lt;div id="page-wrapper"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;div ng-view class="slide-animation"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>in above example ng-include loads the sidebar, and the id <code>page-wrapper</code> is used to add the extra margin on container for the sidebar, and the ng-view is where my view get loaded in.</p>
  
  <p>what i need to do is in somepages i dont want the sidebar to exists, like (in the login page for example)</p>
  
  <pre><code>angular.module('exampleApp', ['ngRoute', 'ngResource', 'ngCookies'])
      //Routes 
  .config(['$routeProvider',
      function($routeProvider) {
          $routeProvider.
          when('/login', {
              templateUrl: 'partials/login.html',
              controller: 'loginCtrl'
          }).
          when('/home', {
              templateUrl: 'partials/home.html',
              controller: 'homeCtrl'
          }).
          otherwise({
              redirectTo: '/login'
          });
      } ]) 
  .controller('mainCtrl',function($rootScope,$window){
      $rootScope.show = true;
      if($window.location.hash == '#/login'){
          $rootScope.show = false;
      } });
  </code></pre>
  
  <p>my best solution that i cameup with was to add another ctrl to the page body and use ng-if and condition to add id to div.</p>
  
  <pre><code>&lt;div ng-if="$root.show" ng-include="'./include/sidebar.html'"&gt;&lt;/div&gt;
              &lt;/sidebar&gt;
  
              &lt;!-- Page Content --&gt;
              &lt;div id="{{$root.show ? 'page-wrapper':''}}"&gt;
  </code></pre>
  
  <p>this worked fine.. yet when ever page changes.. this condition is not reapplied :( so if i opened #/login i can see there is no sidebar, yet once i move to <code>/home</code> the sidebar doesnot show either.</p>
  
  <p>can you please help ? i tried searching for hours with no success.</p>
  
  <p>thanks</p>