Угловая маршрутизация пользовательского интерфейса и несколько представлений во вложенных дочерних состояниях

У меня есть абстрактное родительское состояние, которое в основном содержит только HTML-шаблон с пользовательскими представлениями. У меня есть несколько дочерних состояний, которые содержат несколько представлений, и каждое из дочерних состояний имеет дочерние состояния, которые также содержат несколько представлений. Первое дочернее состояние в строке работает нормально, но когда я пытаюсь получить доступ к дочернему состоянию к дочернему состоянию, происходит сбой.

Вот некоторый упрощенный код (у меня есть несколько компонентов на странице в реальном коде. Он работает так же, как и todo. Он в основном имеет список и представление редактирования (я не хочу редактировать строку/строку для списка) и редактировать представление будет отображаться/скрываться в зависимости от состояния, в котором вы редактируете один элемент или создаете новый элемент. Я хочу, чтобы остальные списки для других компонентов по-прежнему отображались):

индекс.html:

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

js-код:

$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'
            }
        }
    });

Состояние todo.list.edit не работает, и оно просто вернет меня на корневую страницу без каких-либо ошибок. Кто-нибудь знает, в чем может быть проблема и как ее решить? Мы ценим любые предложения. Возможно, я на неправильном пути с просмотрами и есть другой способ решить эту проблему?

Я хочу решить различные «состояния», используя состояния, а не ng-include и совместное использование состояния между службой или чем-то подобным.