How to bind the src of an image to ng-model and extract it in Angular?

Question

I want to bind the source of an image to the source of another image.

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?

Here's what I've got

        <div>
            <img ng-src="{{selectedImg.src}}">
        </div>

        <div>
            <ul ng-repeat="thumb in franchises">
                <li>
                    <img ng-src="{{thumb.images[0].list}}" ng-model="selectedImg">
                </li>
            </ul>
        </div>

Answer 1

You could do it using ng-click:

<div>
    <img ng-src="{{selectedImg.src}}" alt="{{slide.images[0].list}}">
</div>

<div>
    <ul ng-repeat="thumb in franchises">
        <li>
            <img ng-src="{{thumb.images[0].list}}" 
                 alt="{{thumb.images[0].list}}" 
                 ng-click="selectedImg.src = thumb.images[0].list" />
        </li>
    </ul>
</div>

But you have to define selectedImg as an object in your controller like this:

$scope.selectedImg = {};

Answer 2

To answer your question, according to Angular Docs, you can only bind inputs, selects and textareas with ng-model, or a custom form control.

What you probably want to do is this: (which is just what Saulo Lozano did with ng-click)

https://jsfiddle.net/4fz4nx1k/2/

<img ng-src="{{thumb.images[0].list}}" ng-click="selectedImg.src = thumb.images[0].list" >

So you can't really bind an img with an ng-model that way. Besides, if you could put an ng-model inside of an ng-repeat you would get the same "model value" in all of the repeated values of the ng-repeat collection.