title: Ng-repeat an array of images
body: <p>I'm trying to use an ng-repeat on an array of different images. Problem is, these images need to be in-line and do a flip transition. Here's what I had before I decided to use ng-repeat:</p>
  
  <pre><code>`&lt;div class="row"&gt;
         &lt;div class="col-md-3"&gt;
             &lt;div class="flip-container" ontouchstart="this.classList.toggle('hover');"&gt;
                 &lt;div&gt;
                     &lt;div class="front"&gt;
                         &lt;img id="firstTrophy" class="trophy locked" src="/img/trophy.png" /&gt;
                     &lt;/div&gt;
                     &lt;div class="back box"&gt;
                         &lt;p class="text"&gt;
                       You're a champion!!!!
                         &lt;/p&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;`
  </code></pre>
  
  <p>And here's the ng-repeat I have now: </p>
  
  <pre><code>(in view.html)
  `&lt;div ng-repeat="trophy in trophies track by $index"&gt;
                            &lt;img src="{{ trophy }}" /&gt;`
  </code></pre>
  
  <p>(in controller)</p>
  
  <pre><code>var trophies = [
  "img/trophy.png",
  "img/trophy.png",
  "img/trophy.png",
  "img/trophy.png",
  "img/trophy.png"];
  </code></pre>
  
  <p>Thanks for any help you all can provide!</p>