title: AngularJS ng-switch-when expression
body: <p>I'm trying to put together a sort of tabbed menu using <code>ng-switch</code>.</p>
  
  <p>I set the tabs in my Ctrl (streams) and keep track of the currently selected one as selection:</p>
  
  <pre><code>app.controller("StreamCtrl", function($scope) {
  $scope.streams = [{
      title: 'latest',
      icon: 'time',
      data: "Hi, I'm data."
  }, {
      title: 'popular',
      icon: 'fire',
      data: "Hi, I'm data too!"
  }];
  
  $scope.selection = $scope.streams[0];
  
  $scope.getCurrentStreamIndex = function(){
      // Get the index of the current stream given selection
      return $scope.streams.indexOf($scope.selection);
  };
  
  // Go to a defined stream index
  $scope.goToStream = function(index) {
      if($scope.streams[index]) {
          $scope.selection = $scope.streams[index];
      }
  };
  });
  </code></pre>
  
  <p>And in my view (index.html), I use ng-repeat to create a container for each tab:</p>
  
  <pre><code>&lt;section class="streams" ng-controller="StreamCtrl" ng-switch="stream.title == selection.title"&gt;
          &lt;section class="stream" ng-switch-when="true" ng-repeat="stream in streams"&gt;
              {{stream.title}}
              &lt;div class="loaderContainer"&gt;&lt;div class="loader"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/section&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>The problem I run in to is with my ng-switch-when statement, because it won't accept an expression.</p>
  
  <p>If I could set <code>ng-switch-when="{{stream.title}}"</code> then I believe I could use <code>ng-switch="selection.title"</code> and all would be fine.</p>
  
  <p>How would I structure an <code>ng-switch</code> expression though to match a dynamically generated list?</p>