title: Embed YouTube videos using ng-repeat in Angular
body: <p>I am using <code>ng-repeat</code> directive in Angular to embed some videos fetched from server.</p>
  
  <p>I get video IDs from server and I have following code:</p>
  
  <pre><code>&lt;div ng-repeat="media in product.media"&gt;
      &lt;div class="thumbnail"&gt;
          &lt;div class="video-container"&gt;
              &lt;iframe width="100%" src="//www.youtube.com/embed/{{ media.src }}" frameborder="0 " allowfullscreen&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I see the output, the video is not showing up. And when I inspect element in Google chrome,
  the html doesnt seem to change:</p>
  
  <p><img src="https://i.stack.imgur.com/dcze4.png" alt="embed youtube video using angular ng-repeat"></p>
  
  <p>Any thoughts?</p>