Boostrap list

HTML

<div ng-app="">
  <div ng-controller="Ctrl">
    <ul class="nav nav-list" ng-repeat="color in colors">
      <li ng-click="setSelectedIndex($index)" class="{{selected}}">
          <a href="#">{{color}} {{$index}} {{selected}}</a>
      </li>
    </ul>
    <tt>selectedIndex = {{selectedIndex}}</tt>
   </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://docs.angularjs.org/angular-1.0.0rc8.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }

JavaScript

function Ctrl($scope) {

    $scope.colors = ['blue', 'green', 'red'];
    $scope.selectedIndex = undefined;

    $scope.setSelectedIndex = function($index) {
        $scope.selectedIndex = $index;
        
        //$.each($scope.colors, function(i, value) {
        angular.forEach($scope.colors, function(value, i){
            console.log(i, value);
        });
        $scope.selected = 'none';
        this.selected = 'active';
    }
}