title: Using string concatenation within HTML img src in AngularJS
body: <p>I am pulling videos from a playlist with the YouTube API v3. Each video JSON object has a videoId. I am trying to use the videoId to build the src attribute in the img element with Angular. </p>
  
  <p>This is what I currently have:</p>
  
  <pre><code>&lt;table id="playlistvideostable" class="table table-responsive table-striped"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Thumbnail&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="video in playlistvideos"&gt;
              &lt;td&gt;
                  {{video.snippet.title}}
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;img src="http://img.youtube.com/vi/{{video.resourceId.videoId}}/hqdefault.jpg" alt="Video Thumbnail" class="img-responsive"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>How can I concatenate the following strings in the src attribute of the img html element?</p>
  
  <p>"<a href="http://img.youtube.com/vi/" rel="noreferrer">http://img.youtube.com/vi/</a>" + video.resourceId.videoId + "/hqdefault.jpg"</p>