Brute force -- embedded panel names

controller

app.controller('PanelController', function() {
    this.items = badges;
    this.tab = 1;

    this.selectTab = function(setTab) {
      this.tab = setTab;
    };

    this.isSelected = function(checkTab) {
      return this.tab === checkTab;
    };
  });

gistfile1.txt

 <section ng-controller="PanelController as panel">
    
    <ul class="nav nav-pills">
      <li ng-class="{ active: panel.isSelected(1) }">
        <a href="" ng-click="panel.selectTab(1)">Angular</a>
      </li>
      <li ng-class="{ active: panel.isSelected(2) }">
        <a href="" ng-click="panel.selectTab(2)">Rails 3.2-4.0</a>
      </li>
      <li ng-class="{ active: panel.isSelected(3) }">
        <a href="" ng-click="panel.selectTab(3)">RSpec for Rails</a>
      </li>
      <li ng-class="{ active: panel.isSelected(4) }">
        <a href="" ng-click="panel.selectTab(4)">Testing for Rails</a>
      </li>
    </ul>

    <div class="panel" ng-show="panel.isSelected(1)">
      <h4>Angular</h4>
    </div>
    <div class="panel" ng-show="panel.isSelected(2)">
      <h4>Ruby on Rails</h4>
    </div>
    <div class="panel" ng-show="panel.isSelected(3)">
      <h4>RSpec</h4>
    </div>
    <div class="panel" ng-show="panel.isSelected(4)">
      <h4>Testing</h4>
    </div>
  </section>  

Ok the code above lets me have tabbed panels in twitter bootstrap. But it's yucky in that it is hard coded. I'd like to use ng-repeat, but how do I pass along which panel.isSelected, and allow user to panel.selectTab???