AngularJS ui-router Nested Named Views

by Ashish Deopura

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.0.1/angular-ui-router.min.js"></script>
<div ui-view="main"></div>

JavaScript

angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
            .state('test', {
                abstract: true,
                url: '/test',
                views: {
                    'main': {
                         template:  '<h1>Hello!!!</h1>' +
                                    '<div ui-view="view1"></div>' +
                                    '<div ui-view="view2"></div>'
                    }
                }
            })
            .state('test.subs1', {
                url: '',
                views: {
                    'view1': {
                        template: "Im 1View1"
                    },
                    'view2': {
                        template: "Im 1View2"
                    }
                }
            })
            .state('test.subs2', {
                url: '',
                views: {
                    'view1': {
                        template: "Im 2View1"
                    },
                    'view2': {
                        template: "Im 2View2"
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('test.subs1');//I see the data corresponding to the test.subs1
    // Assume here that there are lots of different state transitions in between unrelated to the test1 state
        $state.transitionTo('test.subs2');//I still see the data corresponding to the test.subs1, why is that?
    }]);