title: How to bind the src of an image to ng-model and extract it in Angular?
body: <p>I want to bind the source of an image to the source of another image.</p>
  
  <p><img src="https://i.stack.imgur.com/taSgl.png" alt="visual example"></p>
  
  <p>In the end result, the source of the large image should be bound to the src of the clicked smaller (thumbnail) image. Is this possible using ng-model?</p>
  
  <p>Here's what I've got</p>
  
  <pre><code>        &lt;div&gt;
              &lt;img ng-src="{{selectedImg.src}}"&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;ul ng-repeat="thumb in franchises"&gt;
                  &lt;li&gt;
                      &lt;img ng-src="{{thumb.images[0].list}}" ng-model="selectedImg"&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>