Google images layout with angularjs and ui-bootstrap

Question

I would like to make an image gallery that is similar to Google images gallery layout but I couldn't find any useful example to approach. I would like to show the larger image right below or above the image that is clicked using angularjs .

I started working on a plunker example but don't have any idea how to achieve this. I could able to display the image either on the top of all images or below all the images. Any thoughts on how to achieve this using angularjs and ui-bootstrap . Thanks in advance.

Plunker Link : https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview

View:

<div ng-controller="CollapseDemoCtrl">
    <div ng-repeat="image in images track by $index">
      <img src="{{image}}" ng-click="collapse=!collapse; setImage(image)" style="height:100px;width:100px;float:left;padding:20px;cursor:pointer">
    </div>
    <div>
      <img uib-collapse="collapse" src="{{img}}"style="height:500px;width:500px;padding:20px">
    </div>
</div>

Answer 1

You were nearly there. Only thing missing was to move the image inside the repeater.

Added this to your controller.

$scope.setImage = function(index){
  $scope.visibleIndex = index;
}

And this to your markup:

<div ng-show="visibleIndex == $index"><br />
  <img src="{{image}}" style="height:500px;width:500px;padding:20px">
</div>

I have updated your plunker: https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview