In this example I have a list of images that loads after getting the response. I want to preview the image which is clicked. So I am sending the images url and its unique id into the click function and then comparing the ids, display that image on which the user has clicked.

Below is the HTML:-

<ul>
        <li class="photoimage1" ng-repeat="Img in Images">
          <div class="photoimage">
            <div class="previewDiv" ng-show="previewImg" id="{{Img.id}}" ng-if="currImgId == Img.id" data-role="popup">
              <span ng-click="closeHeaderPopup()">
                <img src="img/cross.png" class="crossPopup" />
              </span>
                <img ng-src="{{mainImageUrl}}" class="onlyphoto1" id="chat_image">
            </div>
              <img ng-src="{{Img.small_image_url}}" class="onlyphoto" id="chat_image" style="max-height:225px;">
              <ul class="a">
                <li class="commonimages">
                  <a href="javascript:;" class="btn btn-lg eyebutton neweye2" ng-click="OpenImg(Img.big_image_url,Img.Id)"><span class="glyphicon glyphicon-eye-open previewbtn"></span><span class="eyespan">Preview</span>
                  </a>
              </div>
                </li>
</ul>

Below is code for the js:-

mainApp.controller("createnewController", function( $scope, $http, $timeout, $state, $rootScope, $filter ) {
        $scope.previewImg = false;
        var myData = {};
        myData['responsetype'] = 'json';
        $scope.date = new Date();
        var responsePromise = $http.post( BASE_URL+"pro/myshouts",JSON.stringify( myData ) );
        responsePromise.success( function( data, status, headers, config ) {
             console.log(JSON.stringify(data));
             imgDimensn = [];
             $scope.fulldata = data.data;
             $scope.Images = data.data.myimages;
             angular.forEach($scope.mages , function(Img){
                    console.log(Img);
                    Img.small_image_url = IMAGE_URL+'users/'+Img.pro_id+'/'+'big_'+mg.media_name;
                    Img.big_image_url = IMAGE_URL+'users/'+Img.pro_id+'/'+'big_'+Img.media_name_pixelated;
                    Img.Id = Img.id;                });

        } );
    responsePromise.error( function ( data, status, headers, config ) {
            //$('.ui-loader').hide();
            console.log( JSON.stringify( data ) );
            if(navigator.connection.type == Connection.NONE) {
                checkConnection();
            }
        } );
    $scope.closeHeaderPopup = function () {
        $('#overlay').hide();
        $scope.previewImg = false;
    };
    $scope.OpenImg = function(image,id){
        $scope.previewImg = true;
        $scope.mainImageUrl = image;
        $scope.currImgId = id;
            console.log(image);  
            console.log($scope.currImgId);

    }