Angular: Insert first child into parent (ui-view)

Question

I am trying to put the first child component into parent one, e.g. test1.html should be inside test.html. Here's the html code:

test.html:

<div ui-view></div>

test1.html:

<h1>First</h1>
<button>Go to second page</button> // This should render test2.html inside test.html

test2.html:

<h2>Second</h2>

test1.controller.js:

    .state('app.test', {
        url: '^/test',
        templateUrl: '/test/test.view.html',
        controller: 'TestController',
        controllerAs: 'testCtrl'
    })
    .state('app.test1', {
        url: '^/test1',
        templateUrl: '/test1/test1.view.html',
        controller: 'test1Controller',
        controllerAs: 'test1Ctrl'
    })
    .state('app.test2', {
        url: '^/test2',
        templateUrl: '/test2.view.html',
        controller: 'test2Controller',
        controllerAs: 'test1Ctrl'
    })

At the moment it is just loading the main test.html page without any test1.html inside.

Answer 1

Try this:

.state('app.test', {
            url: '^/test',
            templateUrl: '/test/test.view.html',
            controller: 'TestController',
            controllerAs: 'testCtrl'
        })
        .state('app.test.test1', {
            url: '/test1',
            templateUrl: '/test1/test1.view.html',
            controller: 'test1Controller',
            controllerAs: 'test1Ctrl'
        })
        .state('app.test.test2', {
            url: '/test2',
            templateUrl: '/test2.view.html',
            controller: 'test2Controller',
            controllerAs: 'test1Ctrl'
        })