title: Dynamically Adding Image into Bootstrap Modal on click from Angular ng-repeat
body: <p>I have a page of photos where I want to allow the user to click to enlarge that specific image into a bootstrap modal. How can I dynamically add each specific image to the modal on click..my html looks like this:</p>
  
  <pre><code>&lt;div class="container fishing-picture-container"&gt;
     &lt;div ng-repeat="picture in fishingPictures" ng-if="$index % 3 == 0" class="row row-buffer"&gt;
       &lt;div class="col-md-4" ng-if="fishingPictures[$index].name"&gt;
          &lt;figure&gt;
              &lt;img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index].name}}" ng-click="showModal(fishingPictures[$index].name)" /&gt;
          &lt;/figure&gt;
       &lt;/div&gt;
       &lt;div class="col-md-4" ng-if="fishingPictures[$index + 1].name"&gt;
          &lt;figure&gt;
              &lt;img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 1].name}}" ng-click="showModal(fishingPictures[$index + 1].name)" /&gt;
          &lt;/figure&gt;
       &lt;/div&gt;
       &lt;div class="col-md-4" ng-if="fishingPictures[$index + 2].name"&gt;
          &lt;figure&gt;
              &lt;img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" ng-click="showModal(fishingPictures[$index + 2].name)" /&gt;
          &lt;/figure&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Creates the bootstrap modal where the image will appear --&gt;
  &lt;div class="modal fade" id="imagemodal" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
       &lt;div class="modal-content"&gt;
         &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
            &lt;h4 class="modal-title" id="myModalLabel"&gt;Image preview&lt;/h4&gt;
         &lt;/div&gt;
      &lt;div class="modal-body"&gt;
           &lt;img src="" id="imagepreview"&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I was thinking I would call a function that would pass in the name of the image and then add that to the modal but doesn't seem to work. Does that seem to be the best way to go about it? Ideally, I would prefer to get a look similar to what it looks like when you click on the image in this link:</p>
  
  <p><a href="http://www.w3schools.com/howto/howto_css_modal_images.asp" rel="nofollow">http://www.w3schools.com/howto/howto_css_modal_images.asp</a></p>