Showing multiple templates within a single modal dialog

I am using bootstrap modal dialog in ember. I render it as a view from the controller.

this.set("modalView", app.AddModalView.create({
   controller: this,
    templateName: "firstModalScreen"
}));
this.get("modalView").append();

My problem is that I want to show another template in this view upon some action in this first template. For Example, choosing something in firstModalScreen takes you to the details of the particular chosen item and should render say, secondModalScreen. The behavior is just like navigating from one route to another but I want to achieve this within the modal dialog. What is the best way to do this?

I could hide the first modal and then render it again with another template, but that causes an unnecessary close and open of same dialog.

I got this answered at twitter bootstrap - Showing multiple templates within a single modal dialog - Stack Overflow in case somebody is looking for it.

1 Like