title: Simple Popup by using Angular JS
body: <p>I am new to using AngularJS. I have 4 buttons named Cancel, Deny, Success &amp; Remove. If am I click on any button I want to show multiple message i.e. If I click on Cancel then message showing you click on Cancel button &amp; so on.</p>
  
  <p>I have follow from below link but simple alert &amp; no controller is used in this example.</p>
  
  <p>I want a <strong>A MODAL POPUP IN AN ANGULARJS DIRECTIVE</strong> example so I can understand. I have try to google it but no simple examples found.</p>
  
  <p>Please help. Thanks</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="mymodal"&gt;
  
  
  &lt;body&gt;
  
  &lt;div ng-controller="MainCtrl" class="container"&gt;
    &lt;button ng-click="toggleModal('Success')" class="btn btn-default"&gt;Success&lt;/button&gt;
    &lt;button ng-click="toggleModal('Remove')" class="btn btn-default"&gt;Remove&lt;/button&gt;
    &lt;button ng-click="toggleModal('Deny')" class="btn btn-default"&gt;Deny&lt;/button&gt;
    &lt;button ng-click="toggleModal('Cancel')" class="btn btn-default"&gt;Cancel&lt;/button&gt;
    &lt;modal visible="showModal"&gt;
        Any additional data / buttons
    &lt;/modal&gt;
  &lt;/div&gt;
  
          &lt;!-- Scripts --&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt;&lt;/script&gt;
  
  
      &lt;!-- App --&gt;
      &lt;script&gt;
          var mymodal = angular.module('mymodal', []);
  
  mymodal.controller('MainCtrl', function ($scope) {
      $scope.showModal = false;
      $scope.buttonClicked = "";
      $scope.toggleModal = function(btnClicked){
          $scope.buttonClicked = btnClicked;
          $scope.showModal = !$scope.showModal;
      };
    });
  
  mymodal.directive('modal', function () {
      return {
        template: '&lt;div class="modal fade"&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;&amp;times;&lt;/button&gt;' + 
                  '&lt;h4 class="modal-title"&gt;{{ buttonClicked }} clicked!!&lt;/h4&gt;' + 
                '&lt;/div&gt;' + 
                '&lt;div class="modal-body" ng-transclude&gt;&lt;/div&gt;' + 
              '&lt;/div&gt;' + 
            '&lt;/div&gt;' + 
          '&lt;/div&gt;',
        restrict: 'E',
        transclude: true,
        replace:true,
        scope:true,
        link: function postLink(scope, element, attrs) {
            scope.$watch(attrs.visible, function(value){
            if(value == true)
              $(element).modal('show');
            else
              $(element).modal('hide');
          });
  
          $(element).on('shown.bs.modal', function(){
            scope.$apply(function(){
              scope.$parent[attrs.visible] = true;
            });
          });
  
          $(element).on('hidden.bs.modal', function(){
            scope.$apply(function(){
              scope.$parent[attrs.visible] = false;
            });
          });
        }
      };
    });
  
  
  
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  Link : http://plnkr.co/edit/?p=preview
  </code></pre>