Ambuj Jauhari Ambuj Jauhari - 1 year ago 171
Javascript Question

Modal Controller not invoked

I am learning angular js and i am trying to load a error modal, whenever any error occurs during rest call.

Below is my modal

<div class="modal-header">
<h1>This is the title</h1>
<div class="modal-body">

Below is my parent controller under which i am defining the error condition

angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare, $uibModal) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$ = 0;
var slides = $scope.slides = [];
var currIndex = 0;

$scope.sendEnvName = function(data) {

window.location.href = "query/queryboard.html";

$scope.addSlide = function (envName) {
text: envName,
id: currIndex++

.success(function (data) {
for (var i in data) {
.error(function (error) {
templateUrl: 'error/ErrorModal.html',
controller: ErrModalInstanceCtrl,
size: 'sm',
errormessage: function () {
return "Some error occured";

var ErrModalInstanceCtrl = function ($scope, $uibModalInstance, errormessage) {
$scope.items = items;



If i dont use resolve or controller, i.e. i hard code some string in the place of placeholder for error message, modal is loaded perfectly. I googled i found different answers regarding putting controller in quotes, but that doesnt helps either.

Please help me on this, not sure where i am going wrong.

Answer Source

You have to register the modal controller outside your current controller and then pass the name to the controller property in $ method.

Like this:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', ModalInstanceCtrl);
ModalInstanceCtrl.$inject = ['$scope', '$uibModalInstance'];
function ModalInstanceCtrl($scope, $uibModalInstance) {

    $scope.item = "I'm your item";

    $scope.ok = function() {

    $scope.cancel = function() {

Your controller:

    var modalInstance = ${
        animation: true,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',  // The modal controller name ('ModalInstanceCtrl')
        size: size,
        resolve: {
            errormessage: function () {
                return "Some error occured";

Plunker here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download