title: Handling header and footer in AngularJS
body: <p>I have been trying to implement the header / footer in an Angular JS App. I was thinking of adding these as ng-include in the main index.html. However this would have worked if the header and footer are static pages. My case is slightly different... In Login page no header / footer is shown. Other pages depending on whether you are logged in or not, you have to show "Welcome user [ logout] " or "Welcome guest [ login ]".</p>
  
  <p>I save the login information and isLoggedIn in a service - then use HeaderCtrl controller to copy that to $scope. The biggest problem seems to be that the whole ng-include is not refreshed on a logoff. Hence divs with ng-show hide directives will not hide/show on change. Somebody suggested using ng-switch - it also behaves the same way.</p>
  
  <p>If I move the header code inside individual views then everything is fine.</p>
  
  <p>A similar question is here: <a href="https://stackoverflow.com/questions/15432370/refresh-header-page-in-angularjs">Refresh header page in angularjs</a>
  <a href="https://stackoverflow.com/questions/19286813/angularjs-handle-repeated-fragments-like-header-and-footer">AngularJS - Handle repeated fragments like Header and Footer</a></p>
  
  <p>I have asked this question earlier but the answers did not help me when I moved the logged variable from the rootScope. The problem is my HeaderCtrl is only executing on a full page refresh. Not executing on Angular page navigation etc.</p>
  
  <p>Here is the code:
  index.html:</p>
  
  <pre><code>&lt;body ng-app="greenhornApp"&gt;
      &lt;div id="navbar" ng-controller="HeaderCtrl"&gt;&lt;div ng-include src="'views/partials/header.html'"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="title-spacer visible-desktop"&gt;&lt;/div&gt;
      &lt;!-- Add your site or application content here --&gt;
      &lt;div class="wrapper" ng-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>header.js:</p>
  
  <pre><code>angular.module('greenhornApp')
    .controller('HeaderCtrl', ['$scope', 'LoginService', function ($scope, loginService) {
      $scope.isLoggedIn = loginService.isLoggedIn();
      $scope.session = loginService.getSession();
    }]);
  </code></pre>
  
  <p>header.html</p>
  
  <pre><code>&lt;div&gt;
    &lt;div ng-show="isLoggedIn"&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
  More stuff here....
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using ng-route and angular 1.2.0-rc3. I put a breakpoint in HeaderCtrl... it gets executed only when I do a full page refresh. What am I doing wrong here?</p>