Closing Bootstrap 2.3 and UI-Bootstrap modal in javascript with AngularJS

Question

I have an AngularJS with Boostrap 2.3.2 and UI-Bootstrap webapp. I have this function to open a UI-Bootstrap modal component from javascript:

$scope.openProcessingBookingModal = function () {        
            var modalInstance = $modal.open({
              backdrop: 'static',
              templateUrl: 'partials/processing-booking-modal.html',
            });

            modalInstance.result.then(function (selectedItem) {
              $scope.selected = selectedItem;
            }, function () {
            });
        }; 

This is the modal in partials/processing-booking-modal.html:

<div id="processing-modal" class="modal-body text-left alert alert-info" style="border: 0px; padding: 30px !important">
    <h3><i class="fa-icon-time"></i> {{'PROCESSING_BOOKING_1' | translate}} 
        <img src="img/spinners/ajax-loader-2.gif" 
             class="img-loader-small" 
             style="margin-left: 1px; vertical-align: inherit;"></img>
    </h3>
    <div class="row-fluid" style="margin-top: 10px">
        <p>{{'PROCESSING_BOOKING_2' | translate}}</p>
        <p>{{'PROCESSING_BOOKING_3' | translate}}</p>
        <p>{{'PROCESSING_BOOKING_4' | translate}}</p>
    </div>
</div>

Function I want to open and close from:

var CreditCardPayment = function (paymentType) {


                        $scope.openProcessingBookingModal();

                        Booking.book({id: $scope.id}, function success(result) {

                                $scope.booking = result;                                                            
                                $scope.closeProcessingBookingModal();

How can I close the modal programatically from javascript in another function closeProcessingBookingModal?

Answer 1

Try this:

$scope.openProcessingBookingModal = function () {        
            var modalInstance = $modal.open({
              backdrop: 'static',
              templateUrl: 'partials/processing-booking-modal.html',
            });
            // capture modal instance
            $scope.myModalInstance = modalInstance;

            modalInstance.result.then(function (selectedItem) {
              $scope.selected = selectedItem;
            }, function () {
            });
        };

// somewhere in same controller
$scope.closeProcessingBookingModal() {
     if($scope.myModalInstance) {
          $scope.myModalInstance.close()
     }
}

I should mention that this requirement is a bit unnatural since the modal typically covers the entire screen and it would normally be closed within its own controller.

Update:

Just saw updated comment on the question. I guess that use case fits.