AngularJS ui-router Nested Named Views

by jank0003

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.subs', {
                url: '',
                views: {
                    'view1@test': {
                        template: 'Im View1'
                    },
                    'view2@test': {
                        template: 'Im View2<button type="button" ng-click="clicked()">Click Me!</button>',
                        controller: function($scope){
                    		$scope.clicked=function(){
                        alert('Im clicked');
                                $state.go("send-to", { "p1": 123,"p2":456});
                    	}
                        }
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('test.subs');
    }]);