How to implement acordion with separate routes on angular + ui-router?

Question

JavaScript

There is a page with a list of objects, each of which (only one at a time) can be expanded, that is, a more or less standard accordion. I would like the expanded state to be expressed as a separate sub-route /list/:itemId and the id of the expanded element to be displayed above the list. The list can be quite large and the inner blocks are also quite large, so ideally it would be better not to render inactive inner blocks at all.
There is something like this structure: plunkr .
Now it does not work correctly, when you select any element, everything in the list is rendered and unfolded. I can not figure out how and where to give a condition for rendering the internal one. There are several versions, but, alas, it was not possible to develop them into a working prototype:
1. Pass iid from item.$scope up to list.$scope and in list.html do something like:
<div ui-view ng-if="item === iid"></div>
Firstly, I didn’t find how to do it, and secondly, there is a suspicion that this will bring down performance.
1.1. You can pass it not to list.$scope, but to spoil it in $rootScope, but I really would not want to.
2. Pass item in repeater from list.$scope to item.$scope, and in item.html wrap everything in
<div ng-if="currentitem === iid"></div>
Suggest a better way or ways to complete my versions.

Answer 1

Try using stateProvider instead of ui-routing