Bootstrap Modal Popup Dialog with AngularJS

Aug 18, 2016 at 4:07 AM

In this article I will show you how to create and open a Bootstrap Modal Dialog box with AngularJS when we check the checkbox. 

We will be using the Angular 1.5.5 version for this article. Make sure that you are referencing the correct version of the script files as Bootstrap syntax for the templates has been changed.


  • Angular.js (Version 1.5.5) - Required for the AngularJS directives
  • Angulr-ui -Bootstrap Template (Version 2.0.2) - Required template to use the bootstrap components written in AngularJS
  • Bootstrap CSS (Version 3.3.6) - Required for the default bootstrap styles for the bootstrap components.

Reference the AngularJS, Bootstrap UI Files

Reference your JS and CSS files in your Angular App as shown below

<script src="//"></script>
<script src="//"></script>
<link href="//" rel="stylesheet">

Create Check Box for opening the Modal Dialog

First we will create a checkbox on the selection of which will open the modal dialog box and we will associate event to the ng-change directive which will call our event whenever the state of the checkbox is checked or unchecked

<input type="checkbox" id="chkNoIncome" ng-model="chkbxNoIncome" ng-change="chkAboutDhaval()" />
<span> Check me to know more about me</span>


Access your all-time preferred developer tools at a ease of a single click to remotely catch-up with your pending software project work with high performance virtual desktops from, You can now access complete MS Office suite on the same desktop by visiting O365CloudExperts powered with top-notch technical support from one of the best DaaS providers – Apps4Rent.

Defining AngularJS template for Modal Dialog

Now we will define the template for our dialog popup. We will place some HTML controls and our standard Ok and Cancel Buttons

    <script type="text/ng-template" id="AboutDhavalShah.html">
      <div class="modal-header">
        <h3 class="modal-title">About Me</h3>
      <div class="modal-body">
        <h1>I'm <span style="color:#337ab7;font-family:Kaushan Script,;font-size:30px;">Dhaval Shah</span></h1>
        <h4>SharePoint and Dot Net Consultant</h4>
        <a href="" target="blank"></a>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">Ok</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>


Defining the AngularJS Directives for our Application

Let's initialize our angular application by defining the angular controller in the module. We will initialize our controller with $uibModal which we will use it to open the modal dialog box.

app = angular.module('app', ['ui.bootstrap']);

app.controller('MyController', function($scope, $uibModal) {
  $scope.chkAboutDhaval = false;
  $scope.clearInputFields = function() {

    if ($scope.chkAboutDhaval) {
      //Place the code to Open the Modal Dialog 



Open the AngularJS Modal Dialog Popup

Place the below snippet code to open the modal dialog box inside the if loop of the checkbox event .

var modalInstance = ${
        templateUrl: 'AboutDhavalShah.html',
        controller: 'ModalInstanceCtrl'


Now if you test the code and click on the checkbox it will open the popup  like below



Close the BootStrap Modal Dialog

But still we have to attach the event to close the dialog. The below snippet will handle the Ok and Cancel button event of the Modal Dialog popup.

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance) {
  $scope.ok = function() {

  $scope.cancel = function() {

This should handle the ok and cancel button events.

You  can find the entire source code over here

I hope this article was useful. Please do provide your valuable feedback.


Found this article by Dhaval Shah valuable? Help by Sharing ...

  • Click on the banners at the top of article or in the right panel to visit my blog's sponsors. They are all hand-picked and are selected based on providing great products and services to the SharePoint community.
  • I’d be very grateful if you’d help it spread by Sharing. Below, you should find links to sharing this article on your favorite social media sites.
Related Posts by Dhaval Shah blog comments powered by Disqus