Add active class to an ng-repeat button with ng-click - angularjs

Question

I want to:
Have a list which gets an active class when the user clicks on them using ng-repeat
I have done some coding:
<ul class="nav nav-pills center-pills">
<li ng-repeat="kit in kits">{{kit.name}}</li>
</ul>
and the controller:
$meteor.subscribe('kits').then(function (){
$scope.kits = $meteor.collection(Kits, false);
});
This returns a list of kits from the mongo database collection.
What's the best way to do this?
Thanks!
edit
I added the following code:
<ul class="nav nav-pills center-pills">
<li ng-repeat="kit in kits" ng-class="{'active': selectedItem == kit.name}"><a ng-click="selectedItem = kit.name" href="">{{kit.name}}</a></li>
</ul>
But the active class is not being removed when I click another li
edit2
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.
<ul class="nav nav-pills center-pills" ng-init="activeIndex = 0">
<li ng-repeat="kit in kits" ng-class="{active:(activeIndex==$index)}"><a ng-click="activeIndex = $index" href="">{{kit.name}}</a></li>
</ul>
edit3
Here's the code I have now (still same result):
<li ng-repeat="kit in kits" ng-class="{'active': selectedItem == kit.name}" ng-init="selectedItem = kits[0].name"><a ng-click="selectedItem = kit.name" href="">{{kit.name}}</a></li>

Answer 1

You want only one active element at the same type or add class on each LI user will click?
with only one element selected at the time
<ul class="nav nav-pills center-pills">
<li ng-repeat="kit in kits" ng-class="{'active': selectedItem == kit.name}">
{{kit.name}}
</li>
</ul>
with multiple selections
<ul class="nav nav-pills center-pills">
<li ng-repeat="kit in kits" ng-class="{'active': kit.active}">
{{kit.name}}
</li>
</ul>