AngularJS Bootstrap

How to Open Twitter Bootstrap Modal Popup in AngularJS

How to Open Twitter Bootstrap Modal Popup in AngularJS
Written by Yogesh Koli

( Using Twitter Bootstrap Modal Popup )


In this tutorial I am going to provide help on how you should deal with Twitter bootstrap modal popup while using it inside AngularJS controller function, or basically you have event in AngularJS where you want to open or close twitter bootstrap modal popup.

Add below Modal popup HTML in your template:

Open Modal Popup in AngularJS:

Use following line of code to open modal popup in AngularJS controller function:

Close Modal Popup in AngularJS:

You can use following script to close popup, just need to update the modal function here, change show to hide.

Prevent Twitter Bootstrap Modal Popup from closing when we click out side of the modal popup:

I have see many of us don’t want to close the modal popup when user clicks outside area of modal popup, that is default behaviour of bootstrap modal popup we can disable it in different ways:

Prevent Modal popup from closing in AngularJS:

We just need to replace modal popup parameter from string to object along with two extra properties to make bootstrap modal popup static.

Note – if you still want to close modal popup by using keyboard escape key you simple make keyboard is equal to true, as showing in below script:


You can also learn how to handle crud operations in AngularJs using PHP from this tutorial – AngularJS PHP CRUD (Create, Read, Update, Delete) Operations

Let me know if you have any questions using comment box below.

Happy Coding!

About the author

Yogesh Koli

Yogesh Koli is a software engineer & a Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 5+ years of experience working with the front-end, back-end, web application development, and system design.