Angular UI Bootstrap Modal doesn't work with ng-include

Question

Live example: http://plnkr.co/edit/wWS3UFB3IZ0cAI4u2x04?p=preview

When "Open Modal 1" is clicked, the following error is thrown:

Error: Dialog.open expected template or templateUrl, neither found. Use options or open method to specify them.

However, Modal 2, which doesn't use ng-include, works fine.

Also, if ui-bootstrap-tpls-0.1.0.js is included instead of ui-bootstrap-tpls-0.2.0.js, all works fine.

Any ideas?

Answer 1

I believe that this issue is a result of changing the modal directive to be terminal. This means that other directives (e.g. ng-include) will not be processed along with modal. Here's the commit that made this change:

https://github.com/angular-ui/bootstrap/commit/ec796ec2299d03ddfb821e97047c0329f11ab962#src/modal/modal.js

I honestly don't know enough about this to know exactly why this directive should be terminal, but one easy solution is just to use ng-include as a child of modal, rather than as a second directive acting on the same element. Here's what I mean:

<div modal="opened1">
    <ng-include src="'modal1.html'"></ng-include>
</div> 

Updated live example: http://plnkr.co/edit/KBBOn2T8cbeLfB0Su9jp