$modalInstance dialog box closes, but screen remains grayed out and inaccessible

Question

I am using angular-ui to open and close a modal. When I close it with submit(object) or dismiss(message), the dialog box closes, but the screen remains grayed out and I can't access my app. Some code:

The parent controller (relevant part):

$scope.deleteConfirm = function(toDelete) {

console.log(toDelete);

var modalObj = {
  templateUrl: 'views/templates/delete.html',
  controller: 'DeleteCtrl',
  size: 'sm',
  resolve: {
    toDelete: function() {
      return toDelete;
    },
    collection: function() {
      return $scope.users;
    }
  }
}

var modalInstance = $modal.open(modalObj);

modalInstance.result.then(function (deletedItem) {
  console.log(deletedItem);
});

};

The parent html:

<button class="btn btn-danger btn-xs" ng-click="deleteConfirm(user)">X</button>

The modal controller:

.controller('DeleteCtrl', ['$scope', '$modalInstance', 'toDelete', 'collection', function ($scope, $modalInstance, toDelete, collection) {

$scope.toDelete = toDelete;

$scope.remove = function() {
    collection.$remove(toDelete).then(function(ref) {
        $modalInstance.close(ref);
    });
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

}]);

The modal template:

<div class = "ll-modal">
<div class="modal-header">
<h3 class="modal-title">Confirm Delete</h3>
</div>
<div class="modal-body">
    Are you sure you want to delete this item? It will be gone forever.
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="remove()">Delete Permanently</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Answer 1

Looks like there is an issue when modal is used with 1.4.x angular version of ng-animate. Since ng-animate removes the DOM element only lazily after transition is done there is something breaking in that flow. You could quick fix it by turning off the animation in modal settings. There is an issue logged in Github which says that ui bootstrap is not yet officially supported fully with 1.4.x.

var modalObj = {
  templateUrl: 'views/templates/delete.html',
  controller: 'DeleteCtrl',
  size: 'sm',
  animation: false, //<-- Turn off
  resolve: {
    toDelete: function() {
      return toDelete;
    },
    collection: function() {
      return $scope.users;
    }
  }
}

or just turn it off globally:

app.config(function($modalProvider) {
  $modalProvider.options.animation = false;
});

Update

If you follow the github link provided above you can see that it has been fixed in the latest version of ui bootstrap, i.e an upgrade of 0.13.3 or above will resolve the issue.