javascript - how to move in an array of images (blobs) in Angular? -

i have image gallery displayed on page. need implement modal whenever user clicks on images. in modal need show full size of selected image. here problem: have made modal work, when click on of gallery images, modal shows of them in single modal. need modal show 1 user clicked on.

please note webpage based on angularjs , php. used ngmodal modal , i'm new using angular (basically know nothing, i'm learning), please patient me. here code:

app.js

readapp.controller('newsgallery', function($scope) {     $scope.mydata = {       modalshown: false,     }     $scope.logclose = function() {       console.log('close!');     };     $scope.togglemodal = function() {       $scope.mydata.modalshown = !$scope.mydata.modalshown;     }; }); 

html

<div ng-controller='newsgallery'>    <modal-dialog show='mydata.modalshown' width='75%' height='80%' on-close='logclose()'>      <div ng-repeat = "i in idsblobs" >       <img src="php/visualizar_archivo.php?id={{i.id}}">          </div>    </modal-dialog>     <div class="row" style="display:flex; flex-wrap: wrap;">       <div class = "col-md-4" ng-repeat = "i in idsblobs" >         <div class="news-image" align="center">            <img src="php/visualizar_archivo.php?id={{i.id}}" class = "img-responsive img-rounded" ng-click='togglemodal();'>         </div>       </div>    </div>                   </div> 

one way have image user clicked on shown in modal introduce scope variable e.g. $scope.selectedimage. next, in function togglemodal(), accept argument image , set scope variable argument.

$scope.togglemodal = function(image) {     $scope.mydata.modalshown = !$scope.mydata.modalshown;     $scope.selectedimage = image; }; 

next update call function in ng-click handler:

<img src="php/visualizar_archivo.php?id={{i.id}}" ng-click='togglemodal(i);' class = "img-responsive img-rounded"> 

then in modal markup, show selected image.

<modal-dialog show='mydata.modalshown' width='75%' height='80%' on-close='logclose()'>   <img src="php/visualizar_archivo.php?id={{selectedimage.id}}"> </modal-dialog> 

that way modal show image user clicked on, instead of images in list.

see demonstration of below.

readapp = angular.module('readapp', ["ngmodal"]);  readapp.controller('newsgallery', function($scope) {    $scope.idsblobs = [{        "id": 'ma',        "src": "http://www.animatedimages.org/data/media/96/animated-lighthouse-image-0032.gif"      },      {        "id": "mu",        "src": "http://icons.iconarchive.com/icons/aha-soft/large-home/128/museum-icon.png"      }    ];      $scope.mydata = {      modalshown: false    }    $scope.logclose = function() {      console.log('close!');    };    $scope.togglemodal = function(image) {      $scope.mydata.modalshown = !$scope.mydata.modalshown;      $scope.selectedimage = image;    };  });

.img-thumb {    height: 48px;    width: 48px;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <script src="//elliott.andrewz.org/cdn/ng-modal.min.js"></script>  <link href="//elliott.andrewz.org/cdn/ng-modal.css" rel="stylesheet" />  <div ng-app="readapp" ng-controller="newsgallery">    <modal-dialog show="mydata.modalshown" width="75%" height="80%" on-close="logclose()">      <img src="{{ selectedimage.src }}" />    </modal-dialog>    <div class="row" style="display:flex; flex-wrap: wrap;">      <div class="col-md-4" ng-repeat="i in idsblobs">        <div class="news-image" align="center">          <img src="{{ i.src }}" class="img-responsive img-rounded img-thumb" ng-click="togglemodal(i);" />        </div>      </div>    </div>  </div>