Multiple Modal with Angular.js

Question

I was trying to create two modal with angular.js on a same page. I just modified the code a bit from angular ui-bootstrap (angular-ui.github.io/bootstrap/). Here is the original plunker for the modal by ui-bootstrap.

I successfully implemented single modal on my page on link "Add Manager" while the second modal on link "Add Captain" is not working.Here's my code-plunker . I am new to angular and stuck here.

I also tried a few things , like changing the name for open function, used two seperate js files for both modal but haven't got success.

Also is there any way to modify the code such that the modal content can be kept in a separate different html file and can be accessed at run time.?

Answer 1

Make sure that you inject $modalInstance not $captainModalInstance to your controller. It's not the same as var modalInstance.

Here is the fixed plunker: Plunker Preview