angular nested tabs and ui-router

Question

I have a view with nested tabs . All tabs content are managed by ui-router and the state of the tabs(active or not) are kept when the browser is refreshed

var app  = angular.module('foundationDemoApp', ['ui.router','mm.foundation']);
app.config([ '$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/home/tab1");
            $stateProvider.state("home", {
                url : "/home",
                templateUrl : "home.html",
                controller : 'HomeCtrl'
            })
            .state("home.tab1", {
                url : "/tab1",
                templateUrl : "tab1.html"
            }).state("home.tab2", {
                url : "/tab2",
                templateUrl : "tab2.html",
                controller : 'Tab2Ctrl'
            }).state("home.tab3", {
                url : "/tab3",
                templateUrl : "tab3.html"
            }).state("home.tab2.subtab1", {
                url : "/subtab1",
                templateUrl : "subtab1.html"
            }).state("home.tab2.subtab2", {
                url : "/subtab2",
                templateUrl : "subtab2.html"
            })      
        } ]);
app.controller('HomeCtrl', ['$scope', '$state', function($scope, $state) {

    $scope.tabs = [
        { heading: "TAB2", route:"home.tab2", active:false },
        { heading: "TAB3", route:"home.tab3", active:false },
    ];

}]);
app.controller('Tab2Ctrl', ['$scope', '$state', function($scope, $state) {

    $scope.tabs = [
        { heading: "SUBTAB1", route:"home.tab2.subtab1", active:false },
        { heading: "SUBTAB2", route:"home.tab2.subtab2", active:false },
    ];
    // manage refresh on nested tabs
    $scope.$on("$stateChangeSuccess", function() {
        $scope.tabs.forEach(function(tab) {
            tab.active = $state.is(tab.route);
        });
    });

}]);

parent tab :

<tabset open-on-load ="false">
        <tab ui-sref="home.tab1" ui-sref-active="active">
            <tab-heading>
                 Individual tab
            </tab-heading>
        </tab>
        <tab 
            ng-repeat="t in tabs" 
            heading="{{t.heading}}"
            ui-sref="{{t.route}}"
            ui-sref-active="active">
        </tab>
    </tabset>
    <div ui-view></div>

subtab :

<tabset>
        <tab 
            ng-repeat="t in tabs" 
            heading="{{t.heading}}"
            ui-sref="{{t.route}}"
    active="t.active">
        </tab>
    </tabset>
    <div ui-view></div>

See plunker here : http://plnkr.co/edit/U8ZOG6RCayb46iA1BIMl?p=preview

It's working fine except i have 2 problems :
- when i select the tab(tab2) which contains the nested tab , the subtab1 is selected but no view is showed , i need to change to subtab2 then comeback again to subtab1 for the view appears
- when i select the tab(tab2) which contains the nested tab , if i click on subtab2 then i click on the parent tab(tab2) , it unselect the parent tab then it remove the subtab view associated. I need to disable this behavior

I have some troubles with these routes problems
Please give me advices

Thank you very much

Answer 1

You should redirect to .subtab1 child state, then only it will show up that. For that you need to have $state.go redirection inside TabCtrl2

var validStates = ['home.tab2.subtab1', 'home.tab2.subtab2'];
if (validStates.indexOf($state.current.name) == -1)
    $state.go('.subtab1');

Demo Plunkr