Angular ui-routing and multiple views in nested child states

I have a parent state that is abstract, which basically only contains the html template that has ui-views. I have multiple child states that contain multiple views, and each of the child states has child states that also contain multiple views. The first child state in the line works fine, but when I try to access the child state in the child state it works.

Here's some code simplified (I have a few components on the page in real code. It works like a todo. It has basically a list and edit view (I don't want the line / line editable for a list) and the edit view will show / hide in depending on the state of your editing one item or creating a new item. I want the rest of the lists for the rest of the components to still be displayed):

index.html

<div ui-view></div>
<div ui-view="todo-edit"></div>
<div ui-view="todo-list"></div>

      

        
        
        
      

    

js code:

$stateProvider
    .state('root', {
        abstract: true,
        url: '/',
        templateUrl: '/index.html'
    })
    .state('root.todo', { //This state works
        url: '/todo',
        views: {
            '': {
                template: 'Todo list'
            },
            'todo-list': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            }
        }
    })
    .state('root.todo.edit', { //This state does not work
        url: '/edit/:id',
        views: {
            '@root': {
                template: 'Edit todo'
            },
            'todo-list@root': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            },
            'todo-edit@root': {
                templateUrl: '/todo-edit.html',
                controller: 'TodoEditController'
            }
        }
    })
    .state('root.todo.create', { //This state does not work
        url: '/create',
        views: {
            '@root': {
                template: 'Create todo'
            },
            'todo-list@root': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            },
            'todo-edit@root': {
                templateUrl: '/todo-edit.html',
                controller: 'TodoEditController'
            }
        }
    });

      

        
        
        
      

    

The todo.list.edit state doesn't work and it just takes me back to the root page without any error. Does anyone know what the problem might be and how to solve it? We appreciate any suggestions. Perhaps I am on the wrong path with views and there is another way to solve it?

I want to resolve different "states" using states rather than ng-include and sharing state between service or something simlar.