Angular отображает информацию о продукте в модальном режиме после нажатия большого пальца ng-repeat

Я только начал изучать angular! У меня есть кнопка «быстрый просмотр» в моем списке миниатюрных изображений продукта, кнопка и изображения генерируются с использованием angular ng-repeat. Мне нужно отобразить соответствующее описание/цену продукта и т. д. (из моего json-файла) в модальном режиме при нажатии на «быстрый просмотр», но я не могу ничего показать. Я хотел, возможно, отфильтровать продукты, используя их код продукта, так как он уникален для каждого элемента. Любая помощь приветствуется.

Мой HTML:

  <div ng-repeat="product in store.products">
    <div class="item col-md-3 col-xs-12">
        <div class="product-image-wrapper text-center">
            <div class="product">
                <div class="image">  
                    <div class="quickview">
                        <a title="Quick View" class="btn btn-xs  btn-quickview" data-target="#product-details-modal" data-toggle="modal" ng-click="selectedProduct = product"> Quick View </a>
                    </div><!--quickview-->
                    <a href="#"><product-image></product-image></a>
                </div><!--image-->
                <p><span class="red"><product-title></product-title></span><br>
                </p>
            </div><!--product-->
        </div><!--product-image-wrapper text-center-->
    </div><!--item col-md-3 col-xs-12-->
</div><!--ng repeat-->

× JS

(function() {
  var app = angular.module('store-products', []);

app.directive('productGallery', function($scope) {
  return {
    restrict: 'E',
    templateUrl: 'includes/product-gallery.html',
    scope: {
      product: '=',
    },
    controller: function() {
      this.current = 0;
      this.setCurrent = function(imageNumber) {
        this.current = imageNumber || 0;
      };
    },
    controllerAs: 'gallerymain'
  };
});

app.directive('productImage', function() {
  return {
    restrict: 'E',
    templateUrl: 'includes/product-image.html',
    controller: function() {
      this.current = 0;
      this.setCurrent = function(imageNumber) {
        this.current = imageNumber || 0;
      };
    },
    controllerAs: 'gallery'
  };
});

  app.directive('productTitle', function (){
    return {
      restrict:'E',
      templateUrl: 'includes/product-title.html'
      scope: {
        product: '=',
      },
    };
  });

  app.directive("productDescriptions", function() {
    return {
      restrict: 'E',
      templateUrl: "includes/product-description.html"
      scope: {
        product: '=',
      },
    };
  });

})();

JSON

[
  {
    "name": "Up in Flames",
    "description": "Covered in dragon scales, this rashguard has a full graphical back showing the flame surrounded dragon itself.",
    "price": 24.99,
    "code": "FLAME",
    "images": [
      "images/products/flames/front.jpg",
      "images/products/flames/back.jpg",
      "images/products/flames/close.jpg"
    ],
    "reviews": []
  },
]