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

The requirement was to not fill the DOM with all second level tables and I came up with a solution for it.

First I tried creating a custom directive and I got it to insert a row at the right place (beneath the clicked row) and created a second level table with headers but could not get it to populate with rows using ng-repeat.

Since I could not find a solution that worked fully I went back to what I already had created, with ng-show and sought a solution like it...and there exist one. Instead of using ng-show/ng-hide, Angular has a directive called ng-switch.

In level one

...and then in the second level, i.e. the second tr

, in which you have the second level ng-repeat.

Here's a new JSFiddle.

Inspect elements, and you will see that there is a comment placeholder for each "collapsed" level 2 table.

---

UPDATE (2014-09-29)

Upon request of also expanding/collapsing level 3, here's a new JSFIDDLE.

NOTE! - This solution have all information in the DOM at all times, i.e. not as the earlier solution, which only added a notation for where the information should be added upon request.

(I can't take credit of this one though, since my friend Axel forked mine and then added the functionality.)