Angular JS : Angular-UI modals won't show up with Bootstrap 3

While migrating from Bootstrap 2 to 3 in an angular jS app, realized there was a bug in modals implementation : Angular-UI directive doesn't add a "display block" CSS prop to the built modal, so it will never show up.

To fix it, simply add the following CSS :

/*
FIX ui-bootstrap modals + bootstrap 3

*/
.modal.ui-bootstrap-modal {
  display: block;
}

And open the modals this way :

$scope.openTheModal = function () {
$modal.open({
templateUrl: 'myModalTemplate.html',
scope: $scope,
windowClass: 'ui-bootstrap-modal'
});
};

Here we add a different class from the regular 'modal' class. Reason is : in my app I had both plain Bootstrap3 modals and angular-UI modals. Simply adding display: block property on 'modal' class was breaking regular Bootstrap 3 modals.

Hope this help.