Nested repeat.for select not displaying data

I have the below simple table displaying users and their roles. My nested repeat.for loops through a list of roles. My repeat.for=“role of rolesData” does not display my data. Can you tell me why not? It only works if I add the 3rd repeat.for inside the div tag.

<tbody>
     <tr repeat.for="user of usersData">
     <td>${user.name}</td>
     <td>
      <select>
       <option repeat.for="role of rolesData">${role.name}</option>
      </select>
     </td>
    </tr>
      <div repeat.for="role of rolesData">
<tbody>

It’s working fine for me here https://stackblitz.com/edit/aurelia-javascript-w1jhve?file=src%2Fapp.js

Can you check and create a reproduction ?

I’m not sure why bigopon’s example is working but I’m also no Aurelia expert. I think since your still inside the context of the for loop you need to use the aurelia $parent object to go back up to your view model.

  <option repeat.for="role of $parent.rolesData">${role.name}</option>