How can I go to a nested route and transfer data to it?

When I go on route / artists-list /: artistId I would like the whole ‘todo’ component to be displayed, and only the <h3> Todo </ h3> heading without {{todo.name}} is displayed. How do I display the entire <li>{{todo.name}} </ li>?
Do I have to use resolve in ui-router, is it mandatory?
When I display a list of artists, everything is ok. When I click on a specific todo, I want to go to 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 });
    }
}

Source: AngularJS