How to pass data into an angular.js UI bootstrap modal controller

Question

Using Angular.js UI bootstrap modal, how can I pass data into a modal popup's controller? I am currently trying:

var modalInstance = $modal.open({
    templateUrl: 'partials/confirmation-modal.html',
    controller: 'confirmationModal',
    resolve: {
        foo: function() { return 'bar'; }
    },
    backdrop: 'static',
    keyboard: true
});

The controller confirmationModal is:

    (function(_name) {
        /**
         * @ngInject
         */
        function _controller($scope, foo) {
            console.log(foo);  
        }

        angular
            .module('myApp')
            .controller(_name, _controller);
    })('confirmationModal');

But this errors with:

Unknown provider: fooProvider

Answer 1

You can try to define the "confirmationModal" controller with angular.module('app').controller(...) instead.

If you want to use a string to refer to a controller, you need to register it to an angular module.

So, you have two ways to make it work:

1.Use string

In modal settings:

controller: "confirmationModal"

In controller definition (assume "app" is your module name):

angular.module('app').controller("confirmationModal", function($scope, foo) {
    console.log(foo);
});

2.Use function itself

In modal settings:

controller: confirmationModal

In controller definition:

var confirmationModal = function($scope, foo) {
    console.log(foo);
}

Can you tell the difference?