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