How to inject parameters into an inline controller function in $uibModal

Question

I'm having a problem with $uibModal's open function, specifically injecting my parameters properly into an inline controller function.

Being the angularjs noob that I am, I've tried several things, none of which I can get to work.

I'm using Visual Studio Code to write the angular, and gulp to build it.

My first attempt (using an inline function):

var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: 'app/workform/LoanActions/LoanActionOverpay.modal.html',
    controller: function ($scope, $uibModalInstance) {
        $scope.showOverpay = true;
        $scope.OverpayAccount = function () {
            $scope.loading = true;
            var key = loanKeyFactory.getLoanKey();

            loanFactory.getLoanInformation(key).then(function (response) {
                $scope.loanType = response.LoanType;
                $uibModalInstance.dismiss('cancel');

                if ($scope.loanType == 'LineOfCredit')
                    ChooseLocLoanStatus();
                else
                    CreatePayment(true, null);
            });
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
            ClearForm();
        }
    },
    size: 'md',
    backdrop: 'static',
    keyboard: false
})

I received no errors when running gulp serve-build from within VS Code, and the code executed as expected. However, after building and releasing in TFS, I would receive this error: [$injector:unpr] Unknown provider: eProvider <- e.

My second attempt:

var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: 'app/workform/LoanActions/LoanActionOverpay.modal.html',
    controller: OverpayCtrl,
    size: 'md',
    backdrop: 'static',
    keyboard: false
})

var OverpayCtrl = function ($scope, $uibModalInstance) {
    $scope.showOverpay = true;
    $scope.OverpayAccount = function () {
        $scope.loading = true;
        var key = loanKeyFactory.getLoanKey();
        loanFactory.getLoanInformation(key).then(function (response) {
            $scope.loanType = response.LoanType;
            $uibModalInstance.dismiss('cancel');
            if ($scope.loanType == 'LineOfCredit') {
                ChooseLocLoanStatus();
            }
            else {
                CreatePayment(true, null);
            }
        });
    };
    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
        ClearForm();
    };
}

I received the same results as my first attempt, i.e. no errors when running gulp serve-build from within VS Code, and the code executed as expected. But I received the same error after building and releasing in TFS: [$injector:unpr] Unknown provider: eProvider <- e.

After a couple more failed attempts that I'll omit to save on space, I went back and did some more research on my first attempt. Thanks to the accepted answers on this post and this post, I discovered that due to minification, I needed to adjust how I was injecting my $scope and $uibModalInstance parameters into my inline controller function. This accepted answer suggests using the extended syntax.

My final attempt, and where I'm at now:

var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: 'app/workform/LoanActions/LoanActionOverpay.modal.html',
    controller: ['$scope, $uibModalInstance', function ($scope, $uibModalInstance) {
        $scope.showOverpay = true;
        $scope.OverpayAccount = function () {
            $scope.loading = true;
            var key = loanKeyFactory.getLoanKey();

            loanFactory.getLoanInformation(key).then(function (response) {
                $scope.loanType = response.LoanType;
                $uibModalInstance.dismiss('cancel');

                if ($scope.loanType == 'LineOfCredit')
                    ChooseLocLoanStatus();
                else
                    CreatePayment(true, null);
            });
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
            ClearForm();
        }
    }],
    size: 'md',
    backdrop: 'static',
    keyboard: false
})

Though I didn't receive any build errors from within VS Code, when attempting to execute the code I received this error: [$injector:unpr] Unknown provider: $scope, $uibModalInstanceProvider <- $scope, $uibModalInstance.

I'm hoping somebody can share some insight as to what I'm doing wrong.

Question: How do I inject parameters into an inline controller function?

UPDATE:

While looking through my code (my final attempt) I realized a couple things.

The first was that when I was injecting my parameters as strings, I wasn't injecting them as individual strings, i.e. '$scope, $uibModalInstance' instead of '$scope', '$uibModalInstance'.

The second thing I noticed was that I wasn't injecting loanKeyFactory or loanFactory, both of which are being used within the function.

After making these changes I thought for sure it would work. But same as before, I could get it to build and execute locally, but not after building and releasing in TFS. I received the same [$injector:unpr] Unknown provider: eProvider <- e error as before.

UPDATE 2:

Ok, so I don't think I'm going crazy. But one of my co-workers asked if I could reproduce the error for him so he could take a look. I went to our testing server where TFS releases the project to, and I couldn't get it to NOT work! That's right, it's magically working now. Since yesterday, I built and released a separate project. After that, I built and released the same code that was previously not working, and now it is. I don't fully understand how doing a new build and release on the same code could have "fixed" it, but I'm not complaining.

Answer 1

In-case anybody ends up here trying to figure out how to inject parameters into an inline controller, what ultimately worked is my final attempt using the extended syntax with the changes from the first update.

var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: 'app/workform/LoanActions/LoanActionOverpay.modal.html',
    controller: ['$scope', '$uibModalInstance', 'loanKeyFactory', 'loanFactory', function ($scope, $uibModalInstance, loanKeyFactory, loanFactory) {
        $scope.showOverpay = true;
        $scope.OverpayAccount = function () {
            $scope.loading = true;
            var key = loanKeyFactory.getLoanKey();

            loanFactory.getLoanInformation(key).then(function (response) {
                $scope.loanType = response.LoanType;
                $uibModalInstance.dismiss('cancel');

                if ($scope.loanType == 'LineOfCredit')
                    ChooseLocLoanStatus();
                else
                    CreatePayment(true, null);
            });
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
            ClearForm();
        }
    }],
    size: 'md',
    backdrop: 'static',
    keyboard: false
})