Angular Dialog directives with Bootstrap 3
As the other answers have stated, this is due to breaking changes in Bootstrap 3. Until the Angular UI team have fixed these issues (currently under development, see the bootstrap3_bis branch) there is a css workaround just for dialog boxes detailed in this blog post:
.modal { display: block; }Working plunkr is available here:
There's a pull request pending that contains fixes for most of the issues with Bootstrap 3.0 and the AngularUi directives, including the issues with the dialogs (which were certainly the most frustrating ones for me!):
https://github.com/angular-ui/bootstrap/pull/742
(See Bootstrap 3 compatible with current AngularJS bootstrap directives?)
The example code you use works with Twitter Bootstrap 2.3.2. Why do you expect it should work with version 3 of Twitter's Bootstrap 3 too?Twitter's Bootstrap 3 is not backwards compatible with Twitter's Bootstrap 2.x. You will have to change / migrate your HTML. Cause you're using Angular JS, you will have to migrate your templates. Most of the works seems ready at the moment, see: https://github.com/angular-ui/bootstrap/pull/742. http://www.bootply.com/bootstrap-3-migration-guide will give you a impression of the changes you will have to make.