Как перейти на вложенный маршрут и перенести на него данные?

Question

Когда я иду по маршруту / artists-list /: artistId, я бы хотел, чтобы отображался весь компонент 'todo', и отображался только заголовок <h3> Todo </ h3> без {{todo.name}}.Как мне отобразить весь <li>{{todo.name}} </ li>?Нужно ли использовать resolve в ui-router, это обязательно?Когда я отображаю list of artists, все в порядке.Когда я нажимаю на конкретный todo, я хочу перейти к todo view

todos-list.html

<ul>
    <todo todos="$ctrl.todos"></todo> 
</ul>

todo.js

let todoModule = angular.module('todo', [
  uiRouter
])

.config(($stateProvider) => {
  "ngInject";
  $stateProvider
    .state('todo', {
      url: '/todos-list/:todoId',
      component: 'todo'
    });
})


.component('todo', todoComponent)
.service('TodoService', TodoService)

.name;

export default artistModule;

todo.html

<h3>Todo</h3>
<li ng-repeat='todo in $ctrl.todos'>
<a ui-sref="todo({ todoId: todo.id })" href='#' >{{todo.name}} 
    </a>
</li>

todo.component.js

let todoComponent = {
  bindings: {
todos: '<'
  },
  template,
  controller
};

export default todoComponent;

todos-list.js

let todosListModule = angular.module('todosList', [
  uiRouter
])

.config(($stateProvider) => {
  "ngInject";
  $stateProvider
    .state('todosList', {
      url: '/todos-list',
      component: 'todosList'
    });

})

.component('todosList', todosListComponent)
.service('TodosListService', TodosListService)

.name;

export default todosListModule;

todos-list.service.js

export default class TodosListService {
    constructor($http) {
    'ngInject';
       this.$http = $http;
   }

    getTodos(query) {  
        const access_token = ''; 
        const params = {
            type: 'todo',

        };

        if (typeof query === 'string') {
            params.q = query;
        }

        return this.$http.get("", {headers: {
            'Authorization': `Bearer ${access_token}`}, params });
    }
}