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

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

<div class="row grid" ng-if="giphyList.length > 0">
  <div data-ng-repeat="giphy in giphyList | limitTo : perPage : startAt" class="col-xs-12 col-sm-6 col-lg-4 col-xl-3 d-flex mb-4">
    <div class="giphy d-flex flex-column w-100">
      <div class="thumbnail pb-2 text-center" data-toggle="modal" data-target="#giphyModal" ng-click="fetchSinglegGiphy(giphy, $index)">
        <img ng-src="{{giphy.images.downsized.url}}" class="img-fluid">
      </div>
      <div class="text mt-auto">
        <p class="m-0 meta">{{giphy.import_datetime | dateParse | date : "MMMM dd y" }}</p>
        <p class="rating m-0">
          <i class="fa fa-star" aria-hidden="true"></i> {{giphy.rating | capitalize}}
        </p>
        <ul class="list-unstyled mb-0 text-center">
          <li ng-if="giphy.username != ''" class="text-muted">{{giphy.type | capitalize}} file uploaded by<br> <strong>{{giphy.username | capitalize }}</strong></li>
          <li ng-if="giphy.username == ''" class="text-muted">{{giphy.type | capitalize}} file uploaded by<br> <strong>Unknown</strong></li>
          <li class="h6">{{giphy.title | titlecase }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="giphyModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title h-3">{{selectedGiphy.title | titlecase }}</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">
            </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>

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

<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>