title: angular bootstrap lightbox throws unknown provider error
body: <p>Am newbie to AngularJS and trying to learn stuffs. I am trying to create a gallery with <strong><a href="https://github.com/compact/angular-bootstrap-lightbox/blob/master/src/lightbox.html" rel="nofollow"><code>angular-bootstrap-lightbox</code></a></strong> and I've included all the necessary dependencies required for the project. Dependencies included are:</p>
  
  <pre><code>&lt;link href="css/angular-bootstrap-lightbox.min.css" rel="stylesheet" /&gt;
  &lt;script src="js/angular.js"&gt;&lt;/script&gt;
  &lt;script src="js/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/ui-bootstrap-tpls-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/angular-bootstrap-lightbox.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Below is my <code>script.js</code> file</p>
  
  <pre><code>angular.module('home', ["ngRoute", "bootstrapLightbox"]).
      config(function ($routeProvider, $locationProvider) {
          $routeProvider.
              when('/home', { templateUrl: 'partials/home.html' }).
              when('/about', { templateUrl: 'partials/about.html' }).
              when('/gallery', { templateUrl: 'partials/gallery.html', controller: "galleryController" }).
              otherwise({ redirectTo: '/home', templateUrl: 'partials/home.html' });
          $locationProvider.html5Mode(true);
      }).controller("homeController", function ($scope, $http, $route) {
          //home controller stuffs
      }).controller('indexController', function ($scope, $location) {
          $scope.isActive = function (route) {
              return route === $location.path();
          }
      }).controller('galleryController', function ($scope, LightBox) {
          $scope.images = [
          {
              'url': 'images/g1.jpg',
              'caption': 'Optional caption',
              'thumbUrl': 'images/g1.jpg' // used only for this example
          },
          {
              'url': 'images/g1.jpg',
              'thumbUrl': 'images/g1.jpg'
          },
          {
              'url': 'images/g1.jpg',
              'thumbUrl': 'images/g1.jpg'
          }
          ];
  
          $scope.openLightboxModal = function (index) {
              Lightbox.openModal($scope.images, index);
          };
      });
  </code></pre>
  
  <p>But it always throws <strong>unknown provider error</strong> whenever I visit gallery page and this error will be pointing to <code>Lightbox</code> parameter mentioned along with <code>$scope</code> in <code>galleryController</code>. Not sure what is the dependency here. But it does not recognize <code>LightBox</code>. I've followed complete steps mentioned there but couldn't quite achieve this right. Any help appreciated.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Below is the error am getting.</p>
  
  <pre><code>angular.js:13424 Error: [$injector:unpr] Unknown provider: LightBoxProvider &lt;- LightBox &lt;- galleryController
  http://errors.angularjs.org/1.5.3/$injector/unpr?p0=LightBoxProvider%20%3C-%20LightBox%20%3C-%20galleryController
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:68:12
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4418:19
      at Object.getService [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4571:39)
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4423:45
      at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4571:39)
      at injectionArgs (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4595:58)
      at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4637:18)
      at $controller (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:10042:28)
      at A.link (http://localhost:63211/js/angular-route.min.js:18:216)
      at invokeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:9623:9) &lt;ng-view class="ng-scope"&gt;(anonymous function) @ angular.js:13424
  http://localhost:63211/gallery Failed to load resource: the server responded with a status of 404 (Not Found)
  </code></pre>