Synchronize objects of the same Array with the index of different pages

Question

Use the angular-bootstrap-lightbox, which serves to show magnified images by clicking on they.

I put the images on different pages, using the ng-repeat and the custom filter| filterBy: ['id']: ''", only that only the image of the first object in the list of the Array is enlarged correctly, the others I need to add +1, +2, +3 and successively. The third object in Array only zooms the image correctly if I add ($index+2), Ex:

$scope.Images = 
[
   { id="1", url: "/images/img-1.jpg", src: "/images/img-1.jpg"
   },
   { id="2", url: "/images/img-2.jpg", src: "/images/img-2.jpg"
   },
   { id="3", url: "/images/img-3.jpg", src: "/images/img-3.jpg"
   } 

];

The object that is the first in the list of Array $scope.images works normally

 <div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '1'">
   <a ng-click="openLightboxModal($index)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

The object that is the second in the list of Array $scope.images only works if I add +1 to $index

<div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '2'">
   <a ng-click="openLightboxModal($index+1)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

The object that is the third in the list of Array $scope.images only works if I add +2 to $index

<div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '3'">
   <a ng-click="openLightboxModal($index+2)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

The default call to the directive, which is inserted in the controller:

$scope.openLightboxModal = function (index) {
  Lightbox.openModal($scope.images, index);
  };

I tried some more ways I did not succeed, how to solve this problem?

Answer 1

Well, from what I understand, you are filtering to appear only the item with that specific id, if you want it to appear all just remove the filter, in case it would look like this:

<div ng-repeat="image in images">

If you want only the chosen image to appear there yes you add filterBy

<div ng-repeat="image in images | filterBy: ['id']: 'aqui vai o id'">

You can also sort by id that would look like this:

<div ng-repeat="image in images | orderBy: ['id']: true">

*if you place false instead of true it sorts from the highest id to the lowest, which is called Reverse

Answer 2

I posted the doubt in the github of the creator of the directive, he guided me, and started to work round.

Change the method on controller, to look for the index of array based on the objeto determined by image.

$scope.openLightboxModal = function (image) {
  Lightbox.openModal($scope.images, $scope.images.indexOf(image));
}; 

In this part of the code you need to change the $index for image

<div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '3'">
   <a ng-click="openLightboxModal(image)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

Thanks to those who contributed and those who tried to help, thanks!