ngAnimate does not work well with modal popup

[PhilipWallin]

I'm working on a large project where we are currently moving from ASP to Angular. This means that isolated parts of our application are using Angular, something which doesn't seem to work well with ngAnimations in modal popups.

Here I set up a simple working example of an animation inside a modal popup (the "Is visible" checkbox for the animation):
http://plnkr.co/edit/qFpFUJRU0xEdDa5IMx9N

The problem for us is that the ng-app is not in the body or html tag in our application, because we want to isolate the Angular code. More like this example (the only difference is that the ng-app has been moved from body tag to a div):
http://plnkr.co/edit/Wq0dCv2HsciPcjVffvEx

This seem to make animations unable to run, as the modal popups are created in the root. Is this working as expected? If so, how are you supposed to set it up/are there any work-arounds?

[chrisirhc]

This is working as expected, AngularJs will not animate elements that are not within (or child of) the root element of the application. The root element of the application is the element that contains the ng-app attribute.

There's an explanation of this over at StackOverflow: http://stackoverflow.com/a/23300927/315562

The reason the modal can't be appended to any arbitrary parent element is that it'll be difficult to ensure this works in many environments as the backdrop may not be able cover the whole document in some cases and we'll need to introduce our own CSS styling.

Right now, I don't have a good solution for you. I would say that if you want modals, you would need ng-app to be at least on the body tag or the html tag. Since, modals operate in the body, if you're trying to isolate Angular code, it violates the isolation you're trying to achieve.

[PhilipWallin]

Thanks for the quick answer, it feels better to understand the problem so that we can decide what to do about it.

[chrisirhc]

@PhilipWallin , I realized I'm wrong about appending on arbitrary parent elements. I've re-looked into the Bootstrap CSS and noticed that this shouldn't be a problem. We can definitely look into an $modal option for appendTo as I've commented on in #2688.