<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.0-beta.19" data-semver="1.3.0-beta.19" src="https://code.angularjs.org/1.3.0-beta.19/angular.js"></script>
    <script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="services.js"></script>
  </head>

  <body ng-app="myApp">
  
  	<!-- commented because not working in firefox inside the embed..
    <div class="input-group">
  		<span class="input-group-btn">
  		    <button ng-click="$window.history.back()" class="btn btn-primary">prev</button>
  		</span>
  		<span class="input-group-btn">
  		    <button ng-click="$window.history.forward()" class="btn btn-primary">next</button>
  		</span>
  		-->
  		<input type="text" class="form-control" ng-model="$window.location.hash" disabled="true">
  	<!--</div>-->
  
  
    <h1>UI-Router example:</h1>
    <!--
    <p>{{ $state.current }}</p>
    <p>History length = {{ $window.history.length }}</p>
    -->
    
    <div class="tab-bloc">
        <ul class="nav nav-tabs">
            <li ui-sref-active="active">
                <a ui-sref="app.tab1">Tab 1</a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.tab2">Tab 2</a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.tab3">Tab 3</a>
            </li>
        </ul>
        
        <div class="tab-content" ui-view>
            <p>loading</p>
        </div>
    </div>
    
    
    
  </body>

</html>
var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
  
  $stateProvider.state('app', {
    abstract: true,
    url: '',
    template: '<div ui-view></div>',
  });
  
  $stateProvider.state('app.tab1', {
    url: '/tab1',
    templateUrl: 'tab1.tpl.html',
  });
  
  $stateProvider.state('app.tab2', {
    url: '/tab2',
    templateUrl: 'tab2.tpl.html',
    controller: 'Tab2StateCtrl'
  });
  
  $stateProvider.state('app.tab2.brand', {
    url: '/brand/:idBrand',
    templateUrl: 'brand.tpl.html',
    controller: 'BrandStateCtrl'
  });
  
  $stateProvider.state('app.tab2.brand.model', {
    url: '/model/:idModel',
    templateUrl: 'model.tpl.html',
    controller: 'ModelStateCtrl'
  });
  
  $stateProvider.state('app.tab3', {
    url: '/tab3',
    templateUrl: 'tab3.tpl.html',
  });
  
  $urlRouterProvider.otherwise('/tab1');
});


myApp.run(function($rootScope, $state, $stateParams, $window, $location, CarBrand, CarModel, PageStateCache) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
  $rootScope.$window = $window;
  $rootScope.$location = $location;
  
  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    var _idBrand, _idModel;
    
    // if we just ask to go on the tab 2,
    // we select the last viewed or the first car brand
    
    if(toState.name === 'app.tab2') {
      
      if(PageStateCache.get('lastTab2State')) {
        var historyState = PageStateCache.get('lastTab2State');
        
				_idBrand = historyState.brand;
				_idModel = historyState.model ? historyState.model : CarModel.getBrandFirstModel(_idBrand).id;
			}
			else {
				_idBrand = CarBrand.getFirst().id;
				_idModel = CarModel.getBrandFirstModel(_idBrand).id;
			}
			
			event.preventDefault();
			$state.transitionTo('app.tab2.brand.model', {idBrand: _idBrand, idModel: _idModel}, {notify: false}).then(function() {
        $rootScope.$broadcast('$stateChangeSuccess');
      });
    }
    
    // if we just ask to go on a brand,
    // we select the last viewed or the first car model
    
    else if(toState.name === 'app.tab2.brand') {
      
      if(PageStateCache.get('lastTab2State')) {
        var historyState = PageStateCache.get('lastTab2State');
        
        if(historyState.brand == toParams.idBrand && historyState.model) {
          _idModel = historyState.model;
        }
  			else {
  				_idModel = CarModel.getBrandFirstModel(toParams.idBrand).id;
  			}
      }
			else {
				_idModel = CarModel.getBrandFirstModel(toParams.idBrand).id;
			}
			
			event.preventDefault();
			$state.transitionTo('app.tab2.brand.model', {idBrand: toParams.idBrand, idModel: _idModel}, {notify: false}).then(function() {
        $rootScope.$broadcast('$stateChangeSuccess');
      });
    }
  });
});











<div>
  <p>tab 1 content.</p>
</div>
<div>
  <p>tab 2 content, select a brand:</p>
  <ul>
    <li ng-repeat="brand in brands track by brand.id" ui-sref-active="current">
      <a ui-sref="app.tab2.brand({ idBrand: brand.id })">{{ brand.name }}</a>
    </li>
  </ul>
  <div class="tab-content" ui-view>
      <p>loading</p>
  </div>
</div>
<div>
  <p>tab 3 content.</p>
</div>
<div>
  <p>brand content, select a model:</p>
  <ul>
    <li ng-repeat="model in models track by model.id" ui-sref-active="current">
      <a ui-sref="app.tab2.brand.model({ idBrand: $stateParams.idBrand, idModel: model.id })">{{ model.name }}</a>
    </li>
  </ul>
  <div class="tab-content" ui-view>
      <p>loading</p>
  </div>
</div>
<div>
  <p>model (id: <span>{{ $stateParams.idModel }}</span>) from brand (id: <span>{{ $stateParams.idBrand }}</span>) content.</p>
</div>

.tab-content {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
}

li.current a {
  color: grey;
  font-weight: bold;
  cursor: default;
  
  &:hover {
    text-decoration: none;
  }
}

myApp.controller('Tab2StateCtrl', function($scope, CarBrand) {
  $scope.brands = CarBrand.getAll();
});

myApp.controller('BrandStateCtrl', function($scope, $stateParams, CarModel, PageStateCache) {
  $scope.models = CarModel.getBrandModels($stateParams.idBrand);
	
	PageStateCache.put('lastTab2State', {brand: $stateParams.idBrand});
});

myApp.controller('ModelStateCtrl', function($scope, $stateParams, PageStateCache) {
	PageStateCache.put('lastTab2State', {brand: $stateParams.idBrand, model: $stateParams.idModel});
	
});

myApp.factory('CarBrand', function() {
  
  var brands = [
    {id: 1, name: 'Audi'},
    {id: 2, name: 'Renault'},
    {id: 3, name: 'Opel'},
    {id: 4, name: 'Seat'}
  ];
  
  var Service = {};
  
  Service.getAll = function() {
    return brands;
  };
  
  Service.getFirst = function() {
    return brands[0];
  };
  
  return Service;
});

myApp.factory('CarModel', function() {
  
  var models = [
    [],
    [
      {id: 1, name: 'A1'},
      {id: 2, name: 'A2'},
      {id: 3, name: 'A3'},
      {id: 4, name: 'A4'}
    ],
    [
      {id: 5, name: 'Clio'},
      {id: 6, name: 'Espace'},
      {id: 7, name: 'Megane'}
    ],
    [
      {id: 8, name: 'Zafira'},
      {id: 9, name: 'Corsa'},
      {id: 10, name: 'Meriva'}
    ],
    [
      {id: 11, name: 'Ibiza'},
      {id: 12, name: 'Leon'}
    ]
  ];
  
  var Service = {};
  
  Service.getBrandModels = function(idBrand) {
    return models[idBrand];
  };
  
  Service.getBrandFirstModel = function(idBrand) {
    return models[idBrand][0];
  };
  
  return Service;
});

myApp.factory('PageStateCache', function($cacheFactory) {
	return $cacheFactory('PageStateCache');
});