title: AngularJS uibModal dependency not found
body: <p>I am having a problem with injecting the <code>uibModal</code> dependency in my app.js:</p>
  
  <p><code>Angular Version:</code> 1.5.7<br>
  <code>ui.boostrap Version:</code> 1.3.3<br>
  <code>Bootstrap Version</code>: 3.3.6</p>
  
  <p>I keep getting this error:</p>
  
  <p><code>angular.js:13708 Error: [$injector:unpr] Unknown provider: $uibModal Provider &lt;- $uibModal  &lt;- ModalController</code></p>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>var app = angular.module('App', ['ui.bootstrap', 'ui.bootstrap.tpls']);
  
  app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {
      $scope.showModal = function() {
          var modalInstance = $uibModal.open({
              animation: true,
              templateUrl: '../HTML/templates/login-modal.html',
              controller: 'newModalController',
              show: true
          });
      };
  }]);
  
  app.controller('newModalController', function($scope, $uibModalInstance) {
      $scope.close = function() {
          $uibModalInstance.dismiss('close');
      };
  });
  </code></pre>
  
  <p><strong>Index.html</strong>:</p>
  
  <pre><code>&lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;App&lt;/title&gt;
  &lt;link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
      &lt;script src="../resources/js/app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-app="App"&gt;
          &lt;header&gt;
              &lt;nav&gt;
                  &lt;div class="row" ng-controller="ModalController"&gt;
                      &lt;img src="../resources/img/logos.png" alt="logo" class="logo"&gt;
                      &lt;ul class="nav-list"&gt;
                          &lt;li&gt;&lt;a href="#" class="learn-more-link"&gt;Learn More&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class="login-button-link" ng-click="showModal()"&gt;Take Action&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>