Angular Bootstrap UI : Simple Example of Modal Box with HTTP service

Modal box is very commonly used UI for display message or records, its open a overlay layout on your main page and display records very awesome manner.You can close and cancel as well this modal box.

There are number of jQuery plugin exist on market some are free and some are paid,Each plugin have some callback function that will use to open modal box,close modal and animation on modal etc functionality.

You can also learn from this tutorial How To Create Simple Model Popup Box using bootstrap modal box.

In This article We will use Bootstrap AngularJS UI modal for modal box and fill data from HTTP angular service.Its very simple to use as like bootstrap modal box.You can download Bootstrap AngularJS from Angular UI Bootstrap – Bootstrap components written in AngularJS

How To Open Modal Box

Here I am opening modal box onClick of a button,When user clicked this button we will call method to open modal box.

Step 1: Create an html element which is responsible to open a modal box.

Step 2: Define a modal box function in controller.

Here we have defined source html file template which has modal box layout.We have also defined a 'UserModalCtrl' to manage modal action and scope variable.

This will show a blank modal box.

Step 3: Define close call function to close modal box.

Step 4: Define a HTTP service that will get result from REST service.

Step 5: Define modal box template file.