title: How to close a modal in angular?
body: <p>I am able to open modal in angular and using ng-show  to show and hid the some div. toggling inside the modal, but when i try to close the modal. It just disappears from the page but does not remove itself from html. I can see the modal in  browser's inspect element. This HANGS the page. Page becomes unresponsive and  I can not click any other button or link on the page. I tried many links but nothing is working. Am I doing any thing wrong. Please help me here. :( Below is my code  I am using angular 1.5.6</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//my parent controller to call modal
  
  (function () {
    var app = angular.module("formModule", ['ngRoute']);
    app.controller("formController", function($scope,$http,$rootScope,$location,ModalService) {  
      $scope.BookNow= function() {
  
         ModalService.showModal({
           templateUrl: "views/feature.html",
           controller: "featureController"
         })
        .then(function(modal) {
            modal.element.modal();
            modal.close.then(function(result) {
                console.log(result);
            });
        });
     }
   });
  })();
  
  // my modal controller 
  (function () {
    var app = angular.module("featureModule", ['ngRoute','ngAnimate']);
    app.controller("featureController", function($scope,$http,$rootScope,close,ModalService) {
      $scope.fea=true;
    
      $scope.close = function(result) {
        ModalService.close(result,500); // close, but give 500ms for 
      }
  
      $scope.calendar=function() {
        $scope.fea=!$scope.fea;
        $scope.cal=!$scope.cal;
      }
    });
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="modal fade" id="modala" &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" ng-click="close(-1)" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
           &lt;/div&gt;
  
           &lt;div class="modal-body" ng-show="fea" &gt;
               &lt;h2 class="modal-title" id="myModalLabel_3"&gt;Select Features&lt;/h2&gt;
           &lt;/div&gt;
  
           &lt;div class="modal-body" ng-show="cal" &gt;
               &lt;h2 class="modal-title" class="ss" id="myModalLabel_3"&gt;Select Date &amp; Time&lt;/h2&gt;
           &lt;/div&gt;
  
           &lt;div class="modal-footer"&gt;
               &lt;div class="inner_read_more modal_btn_1"&gt;
                  &lt;a class="showSingle_1"  ng-click="calendar()"  &gt;Next &lt;i class="fa fa-arrow-circle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
               &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
    </code></pre>
  </div>
  </div>
  </p>