Multi-level tables (inside another if clicked)

Question

Scenario

Lets say I am owner of a big company that has many stores. Depending on what role (place in the organization) I have within the company,

Answer 1

I don't have enough reputation yet to comment, so I'm following up in an answer with an additional functionality issue I have come across. I used Pixic's structure successfully as I really like that the DOM is not polluted with the second level data/tables until they are viewed and it is all working perfectly.

Until I was asked to allow dynamic sorting of the top level table. No problem - I can sort the top level table. The problem is I have been unable to come up with a way to keep the second level table (ie hidden ) synced up and "moving" with the sort of the top level table. This is a display only issue. The underlying data is properly associated with the top level, but the display is messed up as it displays the original "indexed" row as the second level tables don't re-sort with the parent row.

The only thing I can come up with is dynamically inserting the second level html from the controller upon expanding a row, but wondering if anyone else had any other ideas. I tried ng-repeat-start and ng-repeat-end (on a hidden third tr tag to include all elements thinking that should keep all items in the tbody together, and on a hidden tbody), but that didn't work.

Edit: As requested, I have started another question: Multi-level tables (inside another if clicked) and Dynamic Sorting of Top Level Table