Q:

angularjs show sidebar on some routes and hide in others

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 :
<body ng-app="simpleapp">
        <div id="wrapper">
            <!-- Navigation -->

            <div ng-include="'./include/sidebar.html'"></div>

            <!-- Page Content -->
            <div id="page-wrapper">
                <div class="container-fluid">
                    <div ng-view class="slide-animation"></div>
                </div>
            </div>
        </div>

in above example ng-include loads the sidebar, and the id page-wrapper is used to add the extra margin on container for the sidebar, and the ng-view is where my view get loaded in.
what i need to do is in somepages i dont want the sidebar to exists, like (in the login page for example)
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;
    } });

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.
<div ng-if="$root.show" ng-include="'./include/sidebar.html'"></div>
            </sidebar>

            <!-- Page Content -->
            <div id="{{$root.show ? 'page-wrapper':''}}">

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 /home the sidebar doesnot show either.
can you please help ? i tried searching for hours with no success.
thanks

A:

I don't see anything making use of your mainCtrl so I'm not sure how it's ever going to be used. I think what you may want to consider is an approach more like this:
angular.module('myApp')
  .run(function($rootScope, $location, $routeParams) {
    $rootScope.$on('$routeChangeSuccess', function(event, current) {
      // Look at $location.path()
      // If it isn't what you want, toggle showSideBar...
      $rootScope.showSideBar = true|false;
    }
  }]);

Then your HTML could reference it like this:
  <div ng-if="showSideBar" ng-include="'./include/sidebar.html'"></div>

