angularjs - Angular JS issue when implementing another angular lightbox plug in -

angular.module('birdsapp.controllers', ['bootstraplightbox']); angular.module('birdsapp.controllers', []). controller("birdsscontroller", ['$scope','$http', function($scope, $http, lightbox) {          $scope.namefilter = null;     $scope.searchfilter = function (writer) {         var keyword = new regexp($scope.namefilter, 'i');         return !$scope.namefilter || keyword.test(birdfinder[1]);     };      $http.get('app/demo2.txt?callback=json_callback').success (function(data,index){     $scope.birdfinderlist = data.aadata;       console.log(index);       console.log(data.aadata[1].list[1].bird_img);       //$scope.birdfinderlist2 = data.aadata.list;       //console.log(data.aadata[1].list.bird_englishname);       $scope.openlightboxmodal = function (index) {         //lightbox.openmodal($scope.images, index);         console.log(data.aadata[1].list[1].bird_img);         lightbox.openmodal(data.aadata[1].list[1].bird_img, index);       };     });   //   $scope.openlightboxmodal = function (index) {   //   lightbox.openmodal(index);    // } } ]      ); 

i wanted add light box when clicking on image in project , have added following line code in existing code.

 angular.module('birdsapp.controllers', ['bootstraplightbox']); 

&

$scope.openlightboxmodal = function (index) {         //lightbox.openmodal($scope.images, index);         console.log(data.aadata[1].list[1].bird_img);         lightbox.openmodal(data.aadata[1].list[1].bird_img, index);       }; 

but throwing following error

angular.js:5765 typeerror: cannot read property 'openmodal' of undefined @ object.$scope.openlightboxmodal (http://192.168.0.200:81/rnd/angular/all_birds/js/controllers.js:62:21) @ http://192.168.0.200:81/rnd/angular/all_birds/bower_components/angular/angular.js:6393:19 @ http://192.168.0.200:81/rnd/angular/all_birds/bower_components/angular/angular.js:13268:13 @ object.$eval (http://192.168.0.200:81/rnd/angular/all_birds/bower_components/angular/angular.js:8153:28) @ object.$apply (http://192.168.0.200:81/rnd/angular/all_birds/bower_components/angular/angular.js:8233:23) @ htmlanchorelement.<anonymous> (http://192.168.0.200:81/rnd/angular/all_birds/bower_components/angular/angular.js:13267:17) @ http://192.168.0.200:81/rnd/angular/all_birds/bower_components/angular/angular.js:1980:10 @ array.foreach (native) @ foreach (http://192.168.0.200:81/rnd/angular/all_birds/bower_components/angular/angular.js:154:11) @ htmlanchorelement.eventhandler (http://192.168.0.200:81/rnd/angular/all_birds/bower_components/angular/angular.js:1979:5)(anonymous function) @ angular.js:5765(anonymous function) @ angular.js:4812$apply @ angular.js:8235(anonymous function) @ angular.js:13267(anonymous function) @ angular.js:1980foreach @ angular.js:154eventhandler @ angular.js:1979 controllers.js:61 https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/podiceps_cristatus_2_-_lake_dulverton.jpg/220px-podiceps_cristatus_2_-_lake_dulverton.jpg 

my existing working example here

http://mraje.in/angular/all_birds/index.html 

& edited error page here

http://mraje.in/angular/all_birds/index2.html 

the problem injection in controller.

change:

controller("birdsscontroller", ['$scope','$http', function($scope, $http, lightbox) {   

to

controller("birdsscontroller", ['$scope','$http','lightbox', function($scope, $http, lightbox) {