title: Handling the button click event inside my angular Ng-Dialog modal
body: <p>I am having a Angularjs application. I have a form on click of the submit button I am opening a <code>ngModal</code> popup. I do not know how to handle the button click event which is present inside the modal window. I have attached the code below for reference:</p>
  
  <p>Inside my controller:</p>
  
  <pre><code> $scope.ModelValue="Username:"
   $scope.displayModal = function () {
          ngDialog.open({template: 'app/modal/modal.html', scope: $scope});
      }
  </code></pre>
  
  <p>Inside my Modal.html</p>
  
  <pre><code>&lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header primary"&gt;
        &lt;h4 class="modal-title" id="myModalLabel"&gt;Confirmation&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id= "modal-section" class="modal-body"&gt;
        {{ModelValue}}
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-warning" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Confirm&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Inside my directive:</p>
  
  <pre><code>'use strict';
  angular.module('myApp')
    .directive('modal', function ($parse) {
      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;{{ title }}&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.title = attrs.title;
        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;
          });
        });
      }
    };
  });
  </code></pre>
  
  <p>Please let me know how to handle the Confirm and Close button event click. On Confirm button click I need to handle the event inside my parent controller from where I opened the dialog box.</p>