I can't get my angular ui-router nested states to work. Code inside

Question

I literally tried anything at this point, but I am still learning and can't get this to work. https://plnkr.co/edit/FrNChlSwHYDbapr7gFQH?p=preview

<a class="collection-item" 
    ng-repeat="task in tasks"
    ui-sref="todo.detail({ todoID: task.todoID })">
    {{ task.text }}
</a>

What I am trying to do, is routing to /todo/1, /todo/2 and so on from the "todo"-view, but I seem to have a problem with the $stateParams. It'd be nice if you guys could help me out and show me where my problem is :).

Answer 1

Assuming each task in your array of tasks has an ID you want to then navigate to you're going to need something along the lines of:

<a class="collection-item" 
    ng-repeat="task in tasks"
    ng-href="#todo/{{ task.todoID }}">
    {{ task.text }}
</a>

You'll then need the /todo/:toDoId or something similar set up in your routes.

Answer 2

You have not defined todoID in your tasks items.

This works: https://plnkr.co/edit/Wk33w2eRfpz7UZNNZzFs?p=preview

Answer 3

In addition to adding an id field to your task objects you will need to put a <section ui-view></section> in your todo.html file. This is how nested states work. You can use an href as Oliver mentioned or stick to the sref. I've forked your plunk here as an example.