can we have nested div ng-view in AngularJs?

Question

I have specific requirement to binding view dynamically. By default the module have only one month-data 1-Mat-16 to 30-May-2016. Once user scroll the page it should fetch previous month and so on..

I want to bind the data in following structure. how can we achieve in AngularJS. Can I have nested ng-view which give me month-wise html code or can we achieve in single view.

I want to generate every month dynamically and bind in same div.

<div class="content" id="mainContent" style="width: 100% !important">
    <div id="5-2016" class="Month">
        <ul class="BasicsUl" id="2016-5">
            <li id="2016-05-01" style="width: 3.135484%;"></li>
            <li id="2016-05-02" style="width: 3.135484%;"></li>
            <li id="2016-05-031" style="width: 3.135484%;"></li>
            <li id="2016-05-04" style="width: 3.135484%;"></li>
            ....
        </ul>
    </div>
     <div id="4-2016" class="Month">
        <ul class="BasicsUl" id="2016-4">
            <li id="2016-04-01" style="width: 3.135484%;"></li>
            <li id="2016-04-02" style="width: 3.135484%;"></li>
            <li id="2016-04-03" style="width: 3.135484%;"></li>
            <li id="2016-04-04" style="width: 3.135484%;"></li>
            ....

        </ul>
    </div>
    ....
</div>

I want to know the template-design like this:

<div style="width: 100%">
    <div ng-repeat="activity in activities.data | limitTo:20:1">
        <div id="4-2016" class="Month">
            <ul class="BasicsUl" id="2016-4">
                <li id="2016-04-01" style="width: 3.135484%;"></li>
            </ul>

        </div>
    </div>
</div>

Answer 1

You should try to use ui-router for routing. It became a de-facto solution for angular 1.x routing.

https://github.com/angular-ui/ui-router

Answer 2

For this implementation take a look at ui-router

This includes the use of having multiple and / or nested views.

For more details take a look on this