Angular Bootstrap Modal: Unknown provider: $modalInstanceProvider

Question

I am trying to use the Angular Bootstrap Modal directive (http://angular-ui.github.io/bootstrap/) as follows, in my controller to open the modal:

function customerSearch() {     var modalInstance = $modal.open({         templateUrl: 'app/customer/customers.modal.html',         controller: 'customers.modal'     });      modalInstance.result.then(function(selectedCustomer) {         console.log(selectedCustomer);     }); } 

In the modal controller:

var controllerId = 'customers.modal';  angular.module('app').controller(controllerId,     ['$modalInstance', customersModal]);  function customersModal($modalInstance) {     // Modal controller stuff } 

But when I do, I get the following error:

Unknown provider: $modalInstanceProvider <- $modalInstance 

If I take out $modalInstance, it works but I obviously have no reference to the modal in the calling controller..

Edit

I don't know if it is worth noting, but I am using the Controller As syntax:

<div class="container-fluid" data-ng-controller="customers.modal as vm"> 

Application dependencies:

var app = angular.module('app', [     // Angular modules      'ngAnimate',        // animations     'ngRoute',          // routing     'ngSanitize',       // sanitizes html bindings (ex: sidebar.js)      // Custom modules      'common',           // common functions, logger, spinner     'common.bootstrap', // bootstrap dialog wrapper functions      // 3rd Party Modules     'ui.bootstrap',      // ui-bootstrap (ex: carousel, pagination, dialog)     'breeze.directives', // breeze validation directive (zValidate) ]); 

I've created a plunker which is showing the problem here: http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview

Answer 1

The problem was that you were specifying a controller 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: http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview