Load multiple views in angular modal window with or without ui-route

Question

I have a requirement where I have to load multiple view inside a model window. There would be a set of tabs with some icons in it, and on clicking those icons views should change inside the model window. Once the model window is closed, I should get back to the state before opening up the model window.

I tried with the ui-route sub states using ui-sref but I am getting either the new page replaced on the same screen or a blank page instead of getting a model window.

Below is a sample screen which I want to make. Here, I want to navigate through App, Games, Movies, etc. and load the respective screens. On closing the model window, I should get the back view as it is.

Please suggest me a good approach to achieve it. Thanks in advance.

Answer 1

Have you tried using ng-include inside a modal? In below code "selection" should be changed according to your sidebar of modal. Then the div representing your switchable content could be written as

<div class="main-content" ng-switch on="selection">
    <div ng-switch-when="movies" >
        <ng-include src="'movies.html'"></ng-include>
    </div>
    <div ng-switch-when="apps">
        <ng-include src="'apps.html'"></ng-include>
    </div>
    .
    .
    .
    .
</div>