First of all, the idea was to have modal dialog using Bootstrap modal (More info.) and hookup controllers dynamically as the new controllers will be registered dynamically when needed.

Now, let’s move into action:

1- Normal AngularJS app definition, just notice the reference of the $controllerProvider (More info.)

 

2- Main controller definition

3- In our index.html we add the AngularJS controller binding and a simple Bootstrap modal link with the associated target template.

4- Modal target page definition, notice the child controller hookup and the Ajax loading for the child controller definition at the end.

 

5- Child controller definition, notice it’s done via the cp.register (Controller Provider)

6- Last and the magic trick , after all loaded force compiling the modal main element within the prospective scope.

7- Finally, result will be like the following:

Sample code can be obtained from (here)

P.S. The sample in html only, just open directly from the folder.

I hope that helped

Ahmed