title: Add active class to an ng-repeat button with ng-click
body: <p>I want to:</p>
  
  <blockquote>
    <ul>
    <li>Have a list which gets an active class when the user clicks on them using ng-repeat</li>
    </ul>
  </blockquote>
  
  <p>I have done some coding:</p>
  
  <pre><code>&lt;ul class="nav nav-pills center-pills"&gt;
    &lt;li ng-repeat="kit in kits"&gt;&lt;a href=""&gt;{{kit.name}}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the controller:</p>
  
  <pre><code>$meteor.subscribe('kits').then(function (){
    $scope.kits = $meteor.collection(Kits, false);
  });
  </code></pre>
  
  <p>This returns a list of <code>kits</code> from the mongo database collection.</p>
  
  <p>What's the best way to do this?</p>
  
  <p>Thanks!</p>
  
  <p><strong>edit</strong></p>
  
  <p>I added the following code:</p>
  
  <pre><code>&lt;ul class="nav nav-pills center-pills"&gt;
    &lt;li ng-repeat="kit in kits" ng-class="{'active': selectedItem == kit.name}"&gt;&lt;a ng-click="selectedItem = kit.name" href=""&gt;{{kit.name}}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But the active class is not being removed when I click another <code>li</code></p>
  
  <p><strong>edit2</strong></p>
  
  <p>here's the code to have the first one active but still having issues with them not removing the active class when I click on a different one that doesn't have the active class.</p>
  
  <pre><code>&lt;ul class="nav nav-pills center-pills" ng-init="activeIndex = 0"&gt;
    &lt;li ng-repeat="kit in kits" ng-class="{active:(activeIndex==$index)}"&gt;&lt;a ng-click="activeIndex = $index" href=""&gt;{{kit.name}}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>edit3</strong></p>
  
  <p>Here's the code I have now (still same result):</p>
  
  <pre><code>&lt;li ng-repeat="kit in kits" ng-class="{'active': selectedItem == kit.name}" ng-init="selectedItem = kits[0].name"&gt;&lt;a ng-click="selectedItem = kit.name" href=""&gt;{{kit.name}}&lt;/a&gt;&lt;/li&gt;
  </code></pre>