Change ng-src on {{bind}} in context
<p>I'm working with Ionic and Angular. I have a repeat within a repeat, like below. It outputs a main (large) image, and multiple extra's (smaller) images below it.</p>

<pre><code>&lt;div class="list card" ng-model="tweet" ng-repeat="text in tweet"&gt;

  &lt;div class="item item-avatar"&gt;
    &lt;img ng-src="{{text.profileImage}}"&gt;
    &lt;h2&gt;@{{text.screen_name}}&lt;/h2&gt;
    &lt;p&gt;{{correctTimestring(text.timeAt) | date:'medium'}}&lt;/p&gt;
  &lt;/div&gt;

  &lt;div class="item item-body"&gt;
    &lt;img src="{{ newImage || text.image[0].imageurl }}" class="full-image"&gt;

    &lt;div ng-model="image" ng-repeat="data in text.image"&gt;
      &lt;div class="item item-avatar"&gt;
        &lt;img src="{{data.imageurl}}" class="miniImage"&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;p&gt;
      {{text.text}}
    &lt;/p&gt;
    &lt;p&gt;
      &lt;a class="item item-icon-left assertive" href="#"&gt;
        &lt;i class="icon ion-social-twitter-outline"&gt;&lt;/i&gt; Open Link
      &lt;/a&gt;
    &lt;/p&gt;
  &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>Which pulls and creates multiple tiles like so: </p>

<p><a href="https://i.stack.imgur.com/abP2P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/abP2P.png" alt="enter image description here"></a></p>

<p>I would like to be able to click on the lower (smaller photos) to replace the top image, to "scroll through them".</p>

<p>How can I achieve this with Angular, updating the $scope.newImage just replaces all the images. How can I just replace the main image above the smaller images below it?</p>

<p>Any help is appreciated.
Cheers </p>