title: How do I setup nested views in AngularJS?
body: <p>I have an application with various <em>screens</em>. Each screen is assigned a URL, such as <code>#</code>, <code>mails</code>, <code>contacts</code>, and so on.</p>
  
  <p>In my main HTML file I have an <code>ng-view</code> element which updates according to the route the user selects. So far, so good.</p>
  
  <p>Now some of these screens have a sub-navigation. E.g., <code>#mails</code> does have an inbox and a sent folder. They present themselfes with two columns: The sub-navigation on the left, the mails of the appropriate folder on the right.</p>
  
  <p>When you navigate to <code>#mails</code>, it shall redirect you to <code>#mails/inbox</code>, so that basically <em>inbox</em> is the default sub-view for mails.</p>
  
  <p>How could I set this up?</p>
  
  <p>The only approach I can currently think of (I am quite new to AngularJS, hence forgive me if this question is a little bit naive) is to have two views, one for <code>#mails/inbox</code>, and the other for <code>#mails/sent</code>.</p>
  
  <p>When you select a route, these views are loaded. When you select <code>#mails</code> it simply redirects you to <code>#mails/inbox</code>.</p>
  
  <p>But this means that both views must use an <code>ng-include</code> for the sub-navigation. Somehow this feels wrong to me.</p>
  
  <p>What I'd like more is to have nested views: The top one switches between screens such as mails, contacts, and so on, and the bottom one changes between sub-views such as inbox, sent, and so on.</p>
  
  <p>How would I solve this?</p>