title: AngularJS open modal on button click
body: <p>I am trying to learn to open a modal dialog box at the click of the button in AngularJS but unable to do so. I checked the chrome console but there are no errors. Also, since I am learning AngularJS, please advice what to do when chrome console doesn't show any errors.</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;html ng-app="MyApp"&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.min.css" /&gt;
  
  &lt;script type="text/javascript"&gt;
      var myApp = angular.module("MyApp", []);
      myApp.controller('MyController', function ($scope) {
  
          $scope.open = function () {
              $scope.showModal = true;
          };
  
          $scope.ok = function () {
              $scope.showModal = false;
          };
  
          $scope.cancel = function () {
              $scope.showModal = false;
          };
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MyController"&gt;
  
      &lt;button class="btn btn-primary" ng-click="open()"&gt;Test Modal&lt;/button&gt;
  
      &lt;!-- Confirmation Dialog --&gt;
      &lt;div class="modal" modal="showModal" close="cancel()"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Delete confirmation&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;p&gt;Are you sure?&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()"&gt;No&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary" ng-click="ok()"&gt;Yes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End of Confirmation Dialog --&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>