The angularjs tab don't switch? - angularjs

Question

why the tab don't switch? when i click the tab 2 or other,it seems to do nothing.
<div class="container">
<h1>Bootstrap AngularJS Tabs</h1>
<div ng-app="">
<div ng-init="names = [{name:'one'}, {name:'two'}, {name:'three'}, {name:'four'}, {name:'five'}]">
<ul class="nav nav-tabs">
<li ng-repeat="name in names" ng-class="{active: $index == 0}">
Tab {{$index + 1}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="name in names" ng-class="{active: $index == 0}">
<span>{{$index + 1}}</span><span>{{$index+2}}</span>
</div>
</div>
</div>
</div>
</div><!--/container-->
<script src="./angular.min.js"></script>
<script src="./bootstrap.min.js"></script>

Answer 1

It's because you're always setting the first tab to active by doing ng-class="{active: $index == 0}". You need to compare $index to a property on the scope which you change when the user clicks on the tab header (by combining both the href on your anchor, and an ng-click). Something like this simplified version: http://jsbin.com/tesosisi/1/edit
That example sets $scope.names.activeIndex = 0; in the controller, but you'd want to inspect the current location hash to see which tab should be active from the start.