title: Different headers based on current route using ui-router and AngularJS
body: <p>Using AngularJS and ui-router. I need to load a different header based on the current state (the user is logged or not).</p>
  
  <pre><code>&lt;div ui-view="header"&gt;&lt;/div&gt;
  &lt;div ui-view="container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here are some of the states I'm having:</p>
  
  <ul>
  <li>root - everything is based on it</li>
  <li>root.protected - have some special resolve statements to access
  protected pages when the user is logged</li>
  <li>root.protected.home - a protected page</li>
  <li>root.login - an unprotected login page</li>
  </ul>
  
  <p>How can I define different header (view + controller) based on the state?</p>
  
  <p>There should be one header the user tries to access root.login, and different one accessing root.protected.home.</p>