Several modal with Angular.js

Question

I tried to create two modal files with angular.js on one page. I changed the code a bit from angular ui-bootstrap (angular -ui.imtqy.com/bootstrap/). Here is the original plunker for modal using ui-bootstrap.

I successfully implemented one modal on my page using the "Add manager" link, and the second modal on the "Add captain" link does not work. Here is my code plunker . I am new to angular and stuck here.

I also tried a few things, such as changing the name for an open function, using two separate js files for both modal ones, but was unsuccessful.

There is also some way to change the code so that the modal content can be stored in a separate other html file and can be accessed at run time.

Answer 1

Make sure you enter $modalInstance not $captainModalInstance in the controller. This is not the same as var modalInstance .

Here is the fixed plunker: viewing the plunger