Приложение AngularJS: невозможно обновить $index

Когда вы перемещаете giphy в модальное окно, вы также должны отправить $index (что вы и сделали), чтобы в модальном окне вы знали, кто ваш индекс, независимо от $index.

<div class = "controls text-center">
    <a href = "#" ng-click = "fetchSinglegGiphy(giphy, selectedIndex - 1)" class = "left"><i class = "fa fa-chevron-left"></i></a>
    <a href = "#" ng-click = "fetchSinglegGiphy(giphy, selectedIndex + 1)" class = "right"><i class = "fa fa-chevron-right"></i></a>
 </div>

When I click any one of the controls, the GIF file remains the same

Проверьте, соответствует ли giphy тому, что вы ожидаете:

$scope.fetchSinglegGiphy = function(giphy, index) {
   $scope.selectedIndex = index;
   $scope.selectedGiphy = giphy;
   if ( giphy != $scope.giphyList[index] ) {
      $scope.selectedGiphy = $scope.giphyList[index];
   };
};

Обновите selectedGiphy, если это не так.

Вы не только используете $index вне блока ng-repeat, но также используете giphy за пределами этого блока, где он не определен.

Я предполагаю, что у вас есть $scope.giphyList, определенный в вашем контроллере. Так что все, что вам нужно сделать, это отправить файл index.

$scope.selectedIndex = null;
$scope.selectedGiphy = null;

$scope.fetchSinglegGiphy = function(index) {
   $scope.selectedIndex = index;
   $scope.selectedGiphy = $scope.giphyList[index];
}

<div class = "controls text-center">
    <a href = "#" ng-click = "fetchSinglegGiphy(selectedIndex-1)" class = "left">
      <i class = "fa fa-chevron-left"></i>
    </a>
    <a href = "#" ng-click = "fetchSinglegGiphy(selectedIndex+1)" class = "right">
      <i class = "fa fa-chevron-right"></i>
    </a>
</div>

Надеюсь, это поможет, Ваше здоровье

index.html

<div class = "modal fade" id = "giphyModal">
   <div class = "modal-dialog">
      <div class = "modal-content">
         <div class = "controls text-center">
            <a href = "#" ng-click = "fetchSinglegGiphyModal('prev')" class = "left"><i class = "fa fa-chevron-left"></i></a>
            <a href = "#" ng-click = "fetchSinglegGiphyModal('next')" class = "right"><i class = "fa fa-chevron-right"></i></a>
         </div>
         <div class = "modal-header">
            <h4 class = "modal-title h-3">
               {{ selectedGiphy.title | capitalize }}
            </h4>
            <button type = "button" class = "close" data-dismiss = "modal">
               <span>&times;</span>
            </button>
         </div>
         <div class = "modal-body">
            <div class = "row">
               <div class = "col-12">
                  <div class = "image image text-center">
                     <img ng-src = "{{ selectedGiphy.images.original.url }}" alt = "{{ selectedGiphy.title }}" class = "img-fluid" image-on-load ng-hide = "modalImageLoading" />
                     <div class = "spinner-border" ng-if = "modalImageLoading"></div>
                  </div>
               </div>
            </div>
         </div>
         <div class = "modal-footer justify-content-between">
            <div class = "text-muted">
               Image ID: {{ selectedGiphy.id }}
            </div>
            <div class = "btn-group btn-group-sm">
               <button type = "button" class = "btn btn-success" data-dismiss = "modal">
                  <i class = "fa fa-times-circle"></i> Close
               </button>
            </div>
         </div>
      </div>
   </div>
</div>

МОДИФИКАЦИИ:

<a href = "#" ng-click = "fetchSinglegGiphyModal('prev')" class = "left"><i class = "fa fa-chevron-left"></i></a>
<a href = "#" ng-click = "fetchSinglegGiphyModal('next')" class = "right"><i class = "fa fa-chevron-right"></i></a>

fetchSinglegGiphyModal обрабатывает как предыдущий, так и следующий Гифи на основе условия, которое действует на значение аргумента prev или next, которое мы передаем в функцию.

Я также добавил следующий код, чтобы ввести загрузчик, который поставляется с начальной загрузкой, чтобы указать, что изображение GIF загружается в фоновом режиме.

<div class = "image image text-center">
   <img ng-src = "{{ selectedGiphy.images.original.url }}" alt = "{{ selectedGiphy.title }}" class = "img-fluid" image-on-load ng-hide = "modalImageLoading" />
   <div class = "spinner-border" ng-if = "modalImageLoading"></div>
</div>

app.js

$scope.modalImageLoading = false;

$scope.fetchSinglegGiphy = function (giphy, index) {
   $scope.selectedIndex = index;
   $scope.selectedGiphy = giphy;
   $scope.modalImageLoading = true;
};

$scope.fetchSinglegGiphyModal = function (dir) {
   let selectedGiphy = null;
   if (dir === "prev") $scope.selectedIndex -= 1; // To load previous
   else if (dir === "next") $scope.selectedIndex += 1; // To load next

   selectedGiphy = $scope.giphyList[$scope.selectedIndex];
   if (selectedGiphy) {
      $scope.selectedGiphy = selectedGiphy;
      $scope.modalImageLoading = true;
   }
};

$scope.fetchSinglegGiphyModal действует в соответствии с условием, которое мы передаем в параметре, и показывает соответствующие данные Гифи.

Я реализовал пользовательский директива, чтобы показать элемент изображения и скрыть загрузчик при загрузке изображения. Вот код директивы:

app.directive('imageOnLoad', function () {
   return {
      restrict: 'A',
      controller: 'giphyCtrl',
      link: function (scope, element, attrs) {
         element.bind('load', function () {
            scope.$apply(function () {
               scope.modalImageLoading = false;
            });
         });
      }
   }
});

Вот модифицированный плункер код.

Надеюсь, поможет!