Dynamicaly changing images with Bootstrap 5 and AngularJS

I created the following array that contains images with angularJS:

   $scope.docImg = [
      '../../Content/Image/BackGrounds/abra.png',
        '../../Content/Image/BackGrounds/background_black.jpg',
            '../../Content/Image/BackGrounds/halloween.jpg',
            '../../Content/Image/BackGrounds/registration.jpg',
   ]

I displayed them by using ng-repeat and Bootstrap 5

    <div class="@colmode mh-100 mt-4" ng-show="docImg.length>0">
    <div class="card bg-dark h-100 border-eniac">
        <div class="card-header bg-eniac d-flex justify-content-between">
            <a href="#attachments" class="text-light fw-bold" data-bs-toggle="tooltip"  tooltip title="See all images">@Global.Images</a>
            <i class="fas fa-file"></i>
        </div>
        <div class="card-body container">
            
            <div class="row col-12">
            <div ng-repeat="a in docImg" class="col-4">
                

                <div id="" class="img-container">
                    <img ng-src="" class="img-fluid"  data-bs-toggle="modal" data-bs-target="#docImgModal"/>
                </div>


                         </div>
                                 </div>
               
                            </div>
                        </div>
                    </div>

These are small images, but I want to display them in large size too and I thought I am going to use Modals for this purpose.

So I want to create a bootstrap modal that displays the clicked and only the clicked image, and this is where I got stuck: I can display the images if I put the modal in the loop, but then obviously it displays all the images at the same time, which I don't want.

Modal that doesn't work well:

<div class="modal fade" id="docImgModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
             <img ng-src="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
        

What I want to do: Create a Modal or a function that takes and displays only the image that I clicked on. Maybe using a dynamically changing id, but I am open to other ideas too.

The images in the loop:

The issue: ( It displays all the images from the loop )

PS.: The reason I am using AngularJS - This is an older project, so I have no choice.

If my question is not understandable please ask, or tell me how could I explain it better. I am always open to constructive critics.

from Dynamicaly changing images with Bootstrap 5 and AngularJS