title: Angular Bootstrap Modal: Unknown provider: $modalInstanceProvider
body: <p>I am trying to use the Angular Bootstrap Modal directive (<a href="http://angular-ui.github.io/bootstrap/">http://angular-ui.github.io/bootstrap/</a>) as follows, in my controller to open the modal:</p>
  
  <pre><code>function customerSearch() {
      var modalInstance = $modal.open({
          templateUrl: 'app/customer/customers.modal.html',
          controller: 'customers.modal'
      });
  
      modalInstance.result.then(function(selectedCustomer) {
          console.log(selectedCustomer);
      });
  }
  </code></pre>
  
  <p>In the modal controller:</p>
  
  <pre><code>var controllerId = 'customers.modal';
  
  angular.module('app').controller(controllerId,
      ['$modalInstance', customersModal]);
  
  function customersModal($modalInstance) {
      // Modal controller stuff
  }
  </code></pre>
  
  <p>But when I do, I get the following error:</p>
  
  <pre><code>Unknown provider: $modalInstanceProvider &lt;- $modalInstance
  </code></pre>
  
  <p>If I take out <code>$modalInstance</code>, it works but I obviously have no reference to the modal in the calling controller..</p>
  
  <h2>Edit</h2>
  
  <p>I don't know if it is worth noting, but I am using the Controller As syntax:</p>
  
  <pre><code>&lt;div class="container-fluid" data-ng-controller="customers.modal as vm"&gt;
  </code></pre>
  
  <p>Application dependencies:</p>
  
  <pre><code>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)
  ]);
  </code></pre>
  
  <p>I've created a plunker which is showing the problem here: <a href="http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview">http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview</a></p>