javascript - angular-bootstrap modal dialog won't show despite seemingly correct call

Question

I am trying to call modal dialog from an angular controller. The example is pretty simple and not far from very trivial. I have code such as

$modal.open({
        template: '<div class="modal-body">Choose current project<button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>',
        controller: ModalChooseProjectCtrl
    });

Controlling function is declared as

var ModalChooseProjectCtrl = function($scope, $modalInstance) { 
         $scope.ok = function() {
        $modalInstance.close($scope.chosenProject);
    };

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

and it is called from withing a controller's function that belongs to div, which contains bootstrap's navbar.

Problem: when I invoke function that has that $modal.open call, errors are shown

  Error: [$compile:tplrt] Template for directive 'modalBackdrop' must have exactly one root element. template/modal/backdrop.html 
  http://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$compile/tplrt?p0=modalBackdrop&p1=template%2Fmodal%2Fbackdrop.html


  Error: [$compile:tplrt] Template for directive 'modalWindow' must have exactly one root element. template/modal/window.html
  http://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$compile/tplrt?p0=modalWindow&p1=template%2Fmodal%2Fwindow.html

These errors say that template, so to speak, mut be wrapped in one html root element, which is obviosuly so from template. Additionally, after call I see that following elements appear in the code

 <div modal-backdrop="" class="ng-scope"></div>
 <div modal-window="" index="0" animate="animate" class="ng-scope"></div>

and if I click further, more modal-window appear in code. But screen just jumps and nothing happens and I do not get my modal dialog. While in Plunker the calling code for dialog shows it just fine (http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw , but it is just basic calling routine.)

Answer 1

This is a common issue, when you have no angular-ui templates provided.

Latest versions of angular-ui comes in two variants: ui-bootstrap.js and ui-bootstrap-tpls.js. You need to use just last one.

Provided error is not about template of your directive, but about templates of modalBackdrop and modalWindow directives that are a part of angular-ui itself. Usually, Angular cannot find templates and make a HTTP GET request getting some HTML code, like 404 error. And there are many root elements. So thats the reason why you are getting such error. Check HTTP requests on page load for.