Angular ui-router: selectively populating templates in named views

Question

These are the premises I'm trying to implement with ui-router:

• The root page has a ui-view; on click it is populated with the main page (main.html).

• The main page has two named ui-view's: view1 and view2.

• The main page also has four links to populate (1) page11 or page12 in view1, (2) page21 or page22 in view2 (in any combination).

• I use abstract states to be able to select which page goes to its respective named view.

I posted my attempt on plunker, any ideas if this is achievable?

UPDATE

I think this plunk explains more clearly what I'm trying to achieve. Click on page11 and then on page21; each will display their template and clear the other. I need both templates to be shown simultaneously.

Answer 1

This is how I solved this problem: I created a directive that compiles markup (using $compile) and used two directives in my html page, each with a different markup.