Angular BootstrapLightbox not working

I am using angularjs for my application.I am trying to create lightbox of images returned from database.But right now if i include bootstrapLightbox as a dependency in my module i am getting error as Unknown Service Provider and the page loads infinite times without stopping.

Here is how i am including lightbox as dependency in my app.js

    var frontApp = angular.module('frontApp',
   ['ngRoute','ui.bootstrap','bootstrapLightbox']);

Here is the html where i am getting all images from database

    <div class="col-xs-6 col-sm-3 col-md-4" data-ng-
    repeat="photogallery in photogalleries">
    <div class="GalleryBlock">
    <a data-ng-
    click="openLightboxModal(photogallery.photoGalleryImages)"
    class="btn btn-lg btn-success">
    <span data-ng-repeat="photogalleryimage in 
    photogallery.photoGalleryImages |  limitTo: 1"><img src =
    "gallery/" class="GalleryImg">
   </span>
   <h6></h6>
   </a>
   </div>
   </div>

Here is how i am loading css and js files.

   <link rel="stylesheet" type="text/css" media="screen" 
   href="resources/front/css/bootstrap.css">

   <link rel="stylesheet" type="text/css" media="screen"
   href="resources/front/css/Custom-Style.css">

   <link rel="stylesheet" type="text/css" media="screen" 
   href="resources/front/font-awesome-4.0.3/css/font-awesome.min.css">

   <link rel="stylesheet" href="resources/angular/angularjs-datetime-
   picker.css" />

   <link rel="stylesheet" type="text/css" media="screen" 
   href="resources/front/lightbox.css">

   <link href="resources/front/css/angular-bootstrap-lightbox.min.css" 
   rel="stylesheet" />

   <script src="resources/front/js/dataTables.bootstrap.js" 
   type="text/javascript"></script>

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

   <script src="resources/front/js/bootstrap.js" 
   type="text/javascript"></script>

   <script type="text/javascript" src="resources/front/js/jquery-
   1.9.1.min.js"></script>

   <script src="resources/front/js/jquery.dataTables.js"></script>

   <script type="text/javascript" 
   src="resources/front/js/lightbox.js"></script>

   <script src="resources/front/js/angular-bootstrap-lightbox.min.js">          
   </script>

After ng-view in same html i am loading these scripts

    <script src="resources/angular/angular.min.js"></script>

    <script src="resources/angular/angular-route.js"></script>

    <script src="resources/angular/angular-idle.min.js"></script>

    <script src="resources/angular/angular-sanitize.min.js"></script>

    <script src="resources/angular/ui-bootstrap-tpls-2.0.0.min.js">
    </script>

    <script src="resources/angular/js/front/frontapp.js"></script>          

Here is the controller.js

    var GalleryController = function($scope,Lightbox, $rootScope,
    $http, $location, $route,GalleryService,$routeParams) {
    $scope.getallphotogalleries = function(){
    GalleryService.getPhotoGalleryByIndex().then(function(response){
        $scope.photogalleries= response.data;
        console.log($scope.photogalleries);
    });
    }
    }
    //From html i am calling this openLightboxModal function
    $scope.openLightboxModal = function (photoGalleryImages) {
    Lightbox.openModal(photoGalleryImages, 0);
    };

I am able to get images to display.But i want to display it as lightbox.Thats why i have given limit in ng-repeat to display one image.After clicking image i want modal lightbox to appear and display other images inside array in slider format.But now i am not able to do so because the page is loading infinite times giving error as Unknown SERVICE PROVIDER Lightbox.Can anyone tell what is that i am missing?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/05/angular-bootstraplightbox-not-working/
via @lzomedia #developer #freelance #web #lzomedia.com