How should I annotate a controller to work when minified, when it's dependencies are a mixture of objects provided by Angular and by a resolve method?

Question

Ok so I have the following angular view:

<div ng-controller="myController">
    {{helloWorld}}
    <br /><br />
    <button type='button' ng-click='showModal();'>Click me</button>
</div>

And the following JS code:

var testApp = angular.module('testApp', ['ui.bootstrap']);

var myController = function($scope, $modal){
    $scope.helloWorld = 'Hello World';

    $scope.showModal = function(){
        var modalInstance = $modal.open({
            template: '{{something}} <br/> <button type="button" ng-click="updateSomething()">Click me now</button>',
            controller: modalController,
            resolve: {
                helloWorld: function () {
                    return $scope.helloWorld;
            },
        }
    });
    }   

}

myController.$inject = ['$scope', '$modal'];
testApp.controller('myController', myController);

var modalController = function($scope, $modalInstance, helloWorld){

    $scope.something = 'Yada yada yada';

    $scope.updateSomething = function () {
        $scope.something = helloWorld;
    };
}

The JSFiddle is here.

When everything is bundled and minified, myController works great, because I have created an annotation telling testApp about myController, and called testApp's controller method.

However, I am stuck on modalController, how do I wire this up properly to Angular's DI container?

I know that it has a property called $inject. I tried creating an annotation for modalController, in the same way I have done for myController and then pushing helloWorld onto that array as shown in this updated fiddle, but I get an Unknown Provider error.

So my question is, when some of a controllers dependencies are provided by angular, and others are provided through a resolve method, how do you tell Angular's DI container about all of them, so everything will work as expected when minified?

Thanks

Answer 1

The problem is here:

modalController.$inject.push($scope.helloWorld);

This adds the value of helloWorld to the dependencies, but you want helloWorld itself. So delete that line just add helloWorld to the other dependencies:

modalController.$inject = ['$scope','$modalInstance', 'helloWorld'];