title: Error: [$injector:unpr] Unknown provider: modalInstanceProvider <- modalInstance <- modalCtrl with the latest ui bootstrap
body: <p>EDIT - as the code below is, the modal will work - my issue was I had included ng-app and ng-controller in my HTML template for my modal, however they are not included in the below question.</p>
  
  <p>I've my main controller, modal controller and my modal template HTML</p>
  
  <p>Everything seems to be in order and I cannot for the life of me work out (or find out from stackoverflow) why I keep getting <code>Error: [$injector:unpr] Unknown provider: modalInstanceProvider &lt;- modalInstance &lt;- modalCtrl</code> error.
  BTW <code>$modal</code> is now depricated, it's <code>$ubiModal</code> now.</p>
  
  <p>Main ctrl:</p>
  
  <pre><code>var module = angular.module("app", ["agGrid", "ngAnimate", "ngSanitize", "ngDialog", "ui.bootstrap"])
  
  module.controller("mainCtrl", ["$scope", "dataService", "$timeout", "dateFilter", "ngDialog", "$http", "$uibModal", function ($scope, dataService, $timeout, dateFilter, ngDialog, $http, $uibModal) {
  
  $scope.open = function () {
  
      var uibModalInstance= $uibModal.open({
          templateUrl: "views/Modal.html",
          controller: "modalCtrl",
          show: true,
      })
  };
  }]);
  </code></pre>
  
  <p>my modal controller:</p>
  
  <pre><code>module.controller("modalCtrl", ["$scope", "ngDialog", "dataService", "$uibModalInstance", function ($scope, ngDialog, dataService, $uibModalInstance) {
  
  //do stuff
  
  }]);
  </code></pre>
  
  <p>and my HTML template:</p>
  
  <pre><code> &lt;div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" ng-click="closeThisDialog(); printArray()" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                      &lt;h1 class="text-center" style="text-align: center"&gt;Entities:&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
  
                      &lt;div&gt;
                          &lt;div&gt;
                              &lt;input type="text" placeholder="Search" ng-model="entity"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div ng-repeat="entity in entityArray | filter:entity"&gt;
  
                          &lt;label&gt;
                              &lt;input style="float: left; margin-top: 5px" type="checkbox" ng-model="entityChecked" ng-change="getEntityFromModal(entity, entityChecked)" /&gt;
                              &lt;span&gt;{{entity}}&lt;/span&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button ng-click="okButtonEntity();" &gt;OK&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>