Save State of Tab content when changing Route with angularjs and BootStrap Tabs

问题

I have 3 tree bootstrap tabs in my angular application.

<ul class="nav nav-tabs">
  <li><a href="" ng-click="changeRoute(1)">Tab 1</a></li>
  <li><a href="" ng-click="changeRoute(2)">Tab 2</a></li>
  <li><a href="" ng-click="changeRoute(3)">Tab 3</a></li>
</ul>

and in my controller i change the route when changeRoute() called :

 $scope.changeRoute = function(id){
  $location.path('/tabs/'+id);
 }

each tab have a same view and in view i have html select :

<select>
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
  <option>Item 4</option>
</select>

now when Route change new view come. i need when Route change browser or angular save the state of selected index of select in each view. so if in tab 1 user select item 1 in select then user click on tab 2 and change the select and then change the route to tab 1 user can see the item 1 selected in tab 1. i create a small simulation of this scenario in plunker

this plunker is a simulation that what i want without changing route.but i have many thing in view and i think it is better to use route.

来源：https://stackoverflow.com/questions/23404348/save-state-of-tab-content-when-changing-route-with-angularjs-and-bootstrap-tabs