What's wrong with ngAnimate and ui.bootstrap modal?

Question

In this example

http://plnkr.co/edit/ETwexjK0HRu3b8WovoJq

angular.module('animateApp', [
  'ngAnimate', // adding this causes issue with modal backdrop
  'ui.bootstrap'
])

When you close modal, the backdrop won't go away. If I comment out the 'ngAnimate' dependency (script.js line 4), it works just fine.

Am I doing something wrong or is this a bug in ui.bootstrap when used with ngAnimate?

Answer 1

It appears to be a breaking change somewhere between Angular 1.3.15 and 1.4.0. Apparently something in ngAnimate changed that interferes with the backdrop hiding. If you turn off the animation, the backdrop hides fine:

$scope.openModal = function() {
    $modal.open({
      templateUrl: 'modal.html',
      controller: 'ModalCtrl',
      backdrop: true,
      animation: false
    });
  }

If you drop down to 1.3.15, there is no issue: Plunker

If you check the dependencies page for ui-bootstrap, it doesn't look they have quite caught up to 1.4.0 yet: https://david-dm.org/angular-ui/bootstrap#info=devDependencies

It may be worth posting an issue or seeing if someone has already.

Answer 2

Since, this seems to be a temporary problem, you can config the modal animations to be false.

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

That way you'll have to make this change once and all the modals would work fine.