Angular modal template not displaying

Question

I'm somewhat new to Angular. I am trying to display a Bootstap 3 modal dialog when an invalid user role is detected. I cannot get my modal template to display. The behavior seems to work i.e. I can dismiss the faded overlay..I just don't see the actual modal template.

Bootstrap 3 AngularJS 1.0.7 AngularJS UI Bootstrap 0.6.0

Controller

gsApp.controller('MainController', ['$rootScope', '$scope', '$q', '$window', '$location',     '$modal', 'ApplicationCache', 'UserService',
function MainController($rootScope, $scope, $q, $window, $location, $modal, ApplicationCache, UserService) {

   $scope.userRole = "BadRole";

    $scope.showBadRoleModel = function () {
        var showBadRoleModelInstance = $modal.open({
            templateUrl: "badRoleModal.html",
            backdrop: true,
            windowClass: 'modal',
            controller: badRoleModalInstance,
            resolve: {
                items: function () {
                    return $scope.userRole;
                }
            }
        });
    }

    var badRoleModalInstance = function($scope, $modalInstance, items){
        $scope.ok = function () {
            $modalInstance.close();
        };

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

HTML

<div class="row" ng-controller="MainController">

            <script type="text/ng-template" id="badRoleModal.html">
                <div class="modal-header">
                    <h3>I'm a modal!</h3>
                </div>
                <div class="modal-body">
                    <h2>body</h2>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" ng-click="ok()">OK</button>
                    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                </div>
            </script>

            <button class="btn" ng-click="showBadRoleModel()">Show bad role modal</button>
        </div>

Answer 1

AngularJs UI Bootstrap doesn't work with Bootstrap 3 yet.

See more details here: https://github.com/angular-ui/bootstrap/issues/331