Angular Bootstrap UI modal not showing

Question

I'm trying to use the modal from angular ui bootstrap, but it is not showing although the window is blur when the code to show the modal executes,

the codes for the modal is:

<script type="text/ng-template" id="test.html">
    <div class="modal-header">
        <h3>XXXX</h3>
    </div>

    <div class="modal-body">
        <p>XXXX</p>
    </div>

    <div class="modal-footer">
        xxxxxx
    </div>
</script>

the button to show the modal:

<div class="container-fluid" ng-controller="MainController">
    <button ng-click="showModal()" ></button>
</div>

the controller:

var app = angular.module('angularjs-starter', ['ui.bootstrap']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/home.html'
    });
}]);

app.controller('MainController', function($scope, $rootScope, $modal) {
    $scope.showModal = function() {
        $modal.open({templateUrl:'test.html', backdrop: true,windowClass: 'modal'});  
    };
});

Is there any problem with the above codes?

Answer 1

Mine problem was that I included both js files ( ui-bootstrap.min.js and ui-bootstrap-tpls.min.js) when i should have only loaded 'ui-bootstrap-tpls.min.js' . After that it worked like a charm.

Answer 2

I had the same issue and using :

windowClass : 'show'

in the $modal.open function did the trick.

Answer 3

AngularUI modal's documentation says

windowClass - additional CSS class(es) to be added to a modal window template

Which class is this 'modal' you are using. Is this class defined somewhere by you? Shouldn't be a issue, but try removing that.