Load multiple views using angularjs

I have a scenario like this:

<a href="#">Link1</a>
<a href="#">Link2</a>

<div id="child1"></div>
<div id="child2"></div>

When I click on link1 I expect to load View A in div child 1 and View B in div child2.
When I click on link2 I expect to load View C in div child 1 and View D in div child2

I'm using ngRoute (standard AngularJS router) in my app.

i.e: I expect a different set of views for different links. How can this be accomplished using AngularJS. I understand that Angular does provide routing, but whatever examples I see online is only for a single view.

I have kept this scenario very simple. In reality it is a lot more complicated so I will not be able to combine 2 views into 1 for each link.

Solution

Another suggestion, you can use ui-router and multiple named views it's easy to use and really powerful.

You can create your different view container using ui-view like this

<a href="#" >Link1</a>

<a href="#" >Link2</a>

<div ui-view="child1"></div>
<div ui-view="child2"></div>

And in you app.config, you can set for every states which template you want to load for the different views :

.state('report', {      
    views: {        
      'child1': { ... templates and/or controllers ... },       
      'child2': {}      
    }