Angular UI Bootstrap Modal: [$injector:unpr] Unknown provider: $uibModalInstanceProvider

Question

This is a bit strange. When I search this issue online I see many pages of Google results and SO solutions... but none seem to work!

In a nutshell, I am trying to

Answer 1

You are trying to reference a controller that is part of a separate module. In order for this to work, you need to inject your secondary module (addEntry) into your main module (nav):

var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);

Answer 2

As you use $uibModal.open() (see lower) and specify explicitly the controller name, you shouldn't put the directive ng-controller in the template. That cause the error. No ng-controller in the View !

 var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'addEntry/addEntry.html',
  controller: 'addEntryCtrl',
});

Answer 3

Answer Found! After hacking away with my friend, we discovered the answer. I wanted to post it here just in case someone else reads this.

It turns out that we had an ng-controller in our modal window that was in a div tag that wrapped the entire html form that was in the modal. Previously, this worked fine when our form was NOT in a modal (it had a separate URL) but for some reason it breaks when it is in a modal. The ng-controller was referencing the addEntryCtrl. Immediately after removing it, the form worked!

Answer 4

It turns out that if you specify the controller inside the html template (with ng-controller="...") it will not resolve the $uibModalInstance. Specifying the controller from the call to $uibModal.open({controller="...", ...}) will allow it to resolve correctly.

Since you only need the dismiss() and close() methods, you can get them from $scope (named $dismiss and $close) instead, since that will resolve correctly in both ways of instantiating the controller.

var app = angular.module('addEntry', ['ui.bootstrap']);
app.controller('addEntryCtrl', ['$scope', function($scope) {
    $scope.cancel = function() {
        $scope.$dismiss('cancel');
    };

    $scope.$close();
}]);

Answer 5

The problem was that you were specifying a (or double) controller(s) in 2 places- when opening a modal and inside a template - this is not needed. Remove ng-controller from a template and things will work as expected.Trust me,it will work.