How can I open a modal from a modal template?

Question

I'm new on Angular JS + Bootstrap 3 and I'm trying to do something for maps. the thing is that I need to open a modal, and then from a button of that modal open another modal.

This is the external html:

<div class="modal-header">
    <h1>Editor<h1>
</div>
<div class="modal-body" >
    <button class="btn btn-primary" ng-click="treureModalEdit()" data-dismiss="modal">Afegir Punt</button>
</div>`

Here is my example: http://plnkr.co/edit/Zx68EQ?p=info

If something does not load is because libraries, but i only need help where the button 'Posa Marcador!' is.

Some code is in catalan, sorry if that discourages you to help me.

Thank you!

Answer 1

If you inspect with your browser's developer tools the first modal that you open you will see that the markup for this modal is appended to the end of your HTML body, which means that the modal is not nested in your <div ng-controller="DialogDemoCtrl">. This in turn means that the modal does not have a controller of its own, and therefore cannot "understand" the ng-click="treureModalEdit()" you have defined for your button.

In order to fix this problem you should create a second controller and use it for your modal. The treureModalEdit() would then be placed into that second controller.

A few other comments I have on your code:

1. You use things like data-toggle="modal" data-target="#modalEdit", however this is how you would be opening your modal if you did not have an Angular application. In your Angular application what you actually use is the ng-click="func()" you have put on the button. You can therefore clean all this dead code from your HTML (data attributes and modal template).
2. If you are new to Angular I would suggest using a newer version in order to avoid any problems which might be fixed in newer versions. You can use the latest version (1.4.0) or a 1.2.x version is you need to support IE8 (which is not officially supported since Angular version 1.3.x.