title: Changing nav-bar color on page loads ionic
body: <p>Hi i want to change the color of my <code>nav-bar</code> on every page load so i tried this :
   in the menu.html :</p>
  
  <pre><code>&lt;ion-side-menus enable-menu-with-back-views="false"&gt;
  
  &lt;ion-side-menu-content&gt;
  
      &lt;ion-nav-bar class="{{headerClass}}"&gt;
  
          &lt;ion-nav-buttons side="left"&gt;
  
              &lt;button class="button button-icon button-clear ion-navicon" menu-toggle="left"&gt;&lt;/button&gt;
  
          &lt;/ion-nav-buttons&gt;
  
      &lt;/ion-nav-bar&gt;
  
      &lt;ion-nav-view name="side-menu21"&gt;&lt;/ion-nav-view&gt;
  
  &lt;/ion-side-menu-content&gt;
  
  &lt;ion-side-menu side="left"&gt;
  
      &lt;ion-header-bar class="bar-dark"&gt;
  
          &lt;div class="title"&gt;Menu&lt;/div&gt;
  
      &lt;/ion-header-bar&gt;
  
      &lt;ion-content padding="false" class="side-menu-left has-header"&gt;
  
          &lt;ion-list&gt;
  
              &lt;ion-item ui-sref="menu.home" menu-close="" class="item-icon-left"&gt;&lt;i class="icon ion-home assertive"&gt;&lt;/i&gt;Persée&lt;/ion-item&gt;
  
              &lt;ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left"&gt;&lt;i class="icon ion-ios-cart royal"&gt;&lt;/i&gt;Offres SFR&lt;/ion-item&gt;
  
              &lt;ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left"&gt;&lt;i class="icon ion-ios-book energized"&gt;&lt;/i&gt;Mediatheque&lt;/ion-item&gt;
  
              &lt;ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left"&gt;&lt;i class="icon ion-stats-bars balanced"&gt;&lt;/i&gt;Reporting&lt;/ion-item&gt;
  
              &lt;ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left"&gt;&lt;i class="icon ion-help calm"&gt;&lt;/i&gt;FAQ&lt;/ion-item&gt;
  
              &lt;ion-item ui-sref="connexion" menu-close="" class="item-icon-left"&gt;&lt;i class="icon ion-log-out"&gt;&lt;/i&gt;Se deconnecter&lt;/ion-item&gt;
  
          &lt;/ion-list&gt;
  
      &lt;/ion-content&gt;
  
  &lt;/ion-side-menu&gt;
  </code></pre>
  
  <p></p>
  
  <p>And in the controller.js :</p>
  
  <pre><code>angular.module('app.controllers', [])
    .controller('homeCtrl', function($rootScope, $scope) {
      $rootScope.headerClass = 'bar-assertive';
    })
  
    .controller('reportingCtrl', function($rootScope, $scope) {
      $rootScope.headerClass = 'bar-balanced';
    })
  
    .controller('mediathequeCtrl', function($rootScope, $scope) {
      $rootScope.headerClass = 'bar-energized';
    })
  
    .controller('offreSFRCtrl', function($rootScope, $scope) {
      $rootScope.headerClass = 'bar-royal';
    })
  
    .controller('FAQCtrl', function($rootScope, $scope) {
      $rootScope.headerClass = 'bar-calm';
    })
  
    .controller('connexionCtrl', function($rootScope, $scope) {
    })
  </code></pre>
  
  <p>Thanks !!</p>