Untitled

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" charset="utf-8"></script>
    <script src="https://unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
</head>

<body ng-app="myapp" ng-cloak layout="column">
    <a ui-sref="app.main">app.main</a>
    <div ui-view></div>


    <script>
        var myapp = angular.module('myapp', ["ui.router"])
        myapp.config(function($stateProvider, $urlRouterProvider) {

            $urlRouterProvider.otherwise("/");

            $stateProvider
                .state('app', {
                    url: "/",
                    abstract: true,
                    resolve: {
                        teste: function() {
                            return 'user1';
                        }
                    }
                })
                .state('app.main', {
                    url: "main/",
                    templateUrl: "main.html",
                    controller: 'UsersController',
                    controllerAs: 'uc',
                    
                })
                .state('app.main.users', {
                    url: "users/",
                    templateUrl: 'user.html'
                })
                .state('app.main.users.list', {
                    url: "list/",
                    templateUrl: "list.html",
                    controller: 'UsersController2',
                    controllerAs: 'uc2'
                });

        });

        myapp.controller('UsersController', usersController);
        myapp.controller('UsersController2', usersController2);

        function usersController(teste) {
            console.log("UsersController instantiated");
            var vm = this;
            vm.user = teste;
            vm.userlist = { user1: 'user1', user2: 'user2' };
        }
        
        function usersController2() {
            console.log("UsersController2 instantiated");
            var vm = this;
            vm.user = 'user3';
            vm.userlist = { user1: 'user3', user2: 'user4' };
        }
    </script>
</body>

</html>

<a ui-sref="app.main.users">app.main.users</a>
<div ui-view></div>

userlist: {{uc.userlist}}
userlist2: {{uc2.userlist}}

<a ui-sref="app.main.users.list">app.main.users.list</a>
user: {{uc.user}}
<div ui-view></div>