title: Nested Angular Switches?
body: <p>I'm building a MEAN SPA and the current page I'm working on displays the users in the database. I'm pretty new to Angular so I'm still trying to wrap my head around it.</p>
  
  <p>I have a parent container of which the content is controlled by an <code>&lt;ng-switch&gt;</code> and switches to show the relevant content depending on whether the user has clicked 'view all' or 'add new'. This works fine.</p>
  
  <p>What I'm aiming to do now is when the user clicks on a user that's displayed in 'view-all', I want the content to switch to a view containing that users details where they can then go and edit the profile etc. What would be the best way to achieve this?</p>
  
  <p>My HTML is set up like so:</p>
  
  <p><strong>Main staff view</strong></p>
  
  <pre><code>&lt;div class="staff" ng-controller="staffController"&gt;
      &lt;div class="side-menu"&gt;
          &lt;h2&gt;Staff&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a ng-click="tab='view-all'"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; View All&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a ng-click="tab='add-new'"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add New&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="page-content" ng-switch on="tab"&gt;
          &lt;div ng-switch-when="view-all" class="tab-content"&gt;
              &lt;staff-view-all&gt;&lt;/staff-view-all&gt;
          &lt;/div&gt;
          &lt;div ng-switch-when="add-new" class="tab-content"&gt;
              &lt;staff-add-new&gt;&lt;/staff-add-new&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Directives:</strong></p>
  
  <pre><code>.directive('staffViewAll', function () {
          return {
              restrict: 'E',
              templateUrl: 'partials/staff/view-all.ejs'
          }
      })
  
  .directive('staffAddNew', function () {
          return {
              restrict: 'E',
              templateUrl: 'partials/staff/add-new.ejs'
          }
      })
  </code></pre>
  
  <p><strong>view-all.ejs</strong></p>
  
  <pre><code>&lt;h2&gt;View all staff&lt;/h2&gt;
  
  {{ users.length }} users in system
  
  &lt;ul&gt;
      &lt;li ng-repeat="user in users"&gt; &lt;!-- click this and you see the singular view --&gt;
          &lt;img ng-src="{{user.avatar}}?dim=100x100" /&gt;
          &lt;h3&gt;{{user.username}}&lt;/h3&gt;
          &lt;h4&gt;{{user.email}}&lt;/h4&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>