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.)
