title: Angular display product info in modal after clicking an ng-repeat thumb
body: <p>I have just started learning angular! I have a 'quick view' button on my list of product thumbnail images, the button and images are generated using angular ng-repeat. I need to display the appropriate product description/price etc (from my json file) in a modal when clicking on 'quick view' but can't get anything to show. I was wanting to possibly filter the products using their product code, as this is unique to each item. Any help would be much appreciated.</p>
  
  <p>My html:</p>
  
  <pre><code>  &lt;div ng-repeat="product in store.products"&gt;
      &lt;div class="item col-md-3 col-xs-12"&gt;
          &lt;div class="product-image-wrapper text-center"&gt;
              &lt;div class="product"&gt;
                  &lt;div class="image"&gt;  
                      &lt;div class="quickview"&gt;
                          &lt;a title="Quick View" class="btn btn-xs  btn-quickview" data-target="#product-details-modal" data-toggle="modal" ng-click="selectedProduct = product"&gt; Quick View &lt;/a&gt;
                      &lt;/div&gt;&lt;!--quickview--&gt;
                      &lt;a href="#"&gt;&lt;product-image&gt;&lt;/product-image&gt;&lt;/a&gt;
                  &lt;/div&gt;&lt;!--image--&gt;
                  &lt;p&gt;&lt;span class="red"&gt;&lt;product-title&gt;&lt;/product-title&gt;&lt;/span&gt;&lt;br&gt;
                  &lt;/p&gt;
              &lt;/div&gt;&lt;!--product--&gt;
          &lt;/div&gt;&lt;!--product-image-wrapper text-center--&gt;
      &lt;/div&gt;&lt;!--item col-md-3 col-xs-12--&gt;
  &lt;/div&gt;&lt;!--ng repeat--&gt;
  </code></pre>
  
  <p>
      
          
              
                   × 
                      
                          
                      
                      
                          
                              
                          
                      
              
          
      
  JS</p>
  
  <pre><code>(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: '=',
        },
      };
    });
  
  })();
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>[
    {
      "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": []
    },
  ]
  </code></pre>