title: AngularJS multiple templates in one page
body: <p>I have an index that serves a static header menu, and below that an ng-view that based on route, selects the right template. Like this for example:</p>
  
  <pre><code>&lt;navbar&gt;
      ...
  &lt;/navbar&gt;
  &lt;div ng-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Everything is good so far, when a specific route is hit, a template is loaded in that container with the associated controller.</p>
  
  <p>Now, I have another page that is loaded inside ng-view, and it's fired when url "/dashboard" is hit. The problem is that the dashboard page, has a sidebar menu that also needs to contain some routing logic (more or less). When a link has been clicked from the sidebar menu, I have to load only the left hand side of the page (not the whole ng-view container).</p>
  
  <p>I have identified two solutions:</p>
  
  <p>1) Create a directive that stores that sidebar menu, and inject it in all of the pages that are handled by the sidebar menu ==> routing is still handled by ng-view.</p>
  
  <p>2) Use ng-include and have some routing logic in the dashboard page like this:</p>
  
  <pre><code> &lt;a ng-click="templateType = 1"&gt;Template 1&lt;/a&gt;
   &lt;a ng-click="templateType = 2"&gt;Template 1&lt;/a&gt;
  
   &lt;div ng-if="templateType === 1" ng-include="template1" 
    ng-controller="Template1Controller"&gt;&lt;/div&gt;
   &lt;div ng-if="templateType === 2" ng-include="template2" 
    ng-controller="Template2Controller"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Is there another approach? Or what is the best practice in handling both a sidebar that handles some routes, and a static menu that handles another routes, with the mention that the sidebar menu is only available on some of the routes.</p>
  
  <p>I have provided a paint drawing, in the hope that I can explain my problem better.</p>
  
  <p><img src="https://i.stack.imgur.com/d0Swf.png" alt="enter image description here"></p>