How to close a modal in angular?

Question

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

//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;
    }
  });
})();

  <div class="modal fade" id="modala" >
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" ng-click="close(-1)" aria-hidden="true">&times;</button>
         </div>

         <div class="modal-body" ng-show="fea" >
             <h2 class="modal-title" id="myModalLabel_3">Select Features</h2>
         </div>

         <div class="modal-body" ng-show="cal" >
             <h2 class="modal-title" class="ss" id="myModalLabel_3">Select Date & Time</h2>
         </div>

         <div class="modal-footer">
             <div class="inner_read_more modal_btn_1">
                <a class="showSingle_1"  ng-click="calendar()"  >Next <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
             </div>
         </div>
      </div>
   </div>
 </div>

Rohan Kawade Rohan Kawade · Accepted Answer · 2017-06-20T06:33:07

angular.module('myApp', [])
  .controller('myController', function($scope) {
   $scope.close = function(){
	alert('do something!');
     $('#myModal').modal('hide')
	}
	
  });

<html ng-app="myApp">

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <title>Angular-Google-Charts Example</title>
</head>

<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer" ng-controller="myController">
          <button type="button" class="btn btn-default" ng-click="close()">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>

</html>

Please see this demo.

How to close a modal in angular?

1 Answers