Bootstrap Modal With AngularJs – The angular way

To use bootstrap with angular, one can make use of this library 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="//"></script>

and of course bootstrap.css

<link href="//" 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 class="modal-body">
         Hello world!
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>

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

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

    $scope.ok = function () {

    $scope.cancel = function () {

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 :