title: How to handle header and footer with AngularJs
body: <p>I'm very sorry If I don't explain myself very well, so here goes. Basically I'm having trouble trying to work this issue out. I am using Yeoman to generate my angular project. I have a header and footer, footer will be static and header will need its own controller. The problem I am having is, I don't particularly want the header to be outside other controllers. Maybe I'm wrong and it's not actually a problem and best practice would obviously be to have the header outside <code>ng-view</code>? This is what I have so far:</p>
  
  <pre><code>   &lt;head&gt;
       &lt;!-- head stuff here --&gt;
     &lt;/head&gt;
     &lt;body ng-app="dscover.me"&gt;
  
          &lt;div ng-include src="'partials/header.html'"&gt;&lt;/div&gt;  
  
          &lt;div ng-view=""&gt;
          &lt;/div&gt;
  
          &lt;div ng-include src="'partials/footer.html'"&gt;&lt;/div&gt;
     &lt;/body&gt;
  </code></pre>
  
  <p>Is this a correct way of including a header and footer outside the <code>MainCtrl</code>? It makes sense to me only because, if I was to create a new controller / page, I'd still have access to the controllers outside it? The problem again is I want to refrain myself from using <code>rootScope</code> and unfortunately this seems to be the only way when it comes to having the header outside the <code>MainCtrl</code>?</p>
  
  <p>I'm sorry for the terrible explanation, but I hope you guys understand. If there is a better way of doing this, please let me know. Any help will be appreciated!</p>