Bootstrap Modal With AngularJs – The angular way

To use bootstrap with angular, one can make use of this library http://angular-ui.github.io/bootstrap/ from the angular ui team. Initally I had a little problem implementing this as there were many angular modal plugins available out there, but after using and testing each of them I have found this one to be pretty simple and straight forward to write.

Before you begin you will need to include this js file in your scripts

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

and of course bootstrap.css

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

Next in your html you will need to define a script block like this

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Modal Header</h3>
    </div>
    <div class="modal-body">
         Hello world!
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

Next you will need to add this piece of code after you define your controller

var ModalInstanceCtrl = function ($scope, $modalInstance) {

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

add a button in your html to trigger the modal to open, also add a click event to a function open() where we will open the bootstrap modal using the above controller.

<button class="btn btn-default" ng-click="open()">Open me!</button>

Reference : https://github.com/angular-ui/bootstrap/tree/master/src/modal