Basically I am facing a problem, I have taken multiple files from HTML input. When the submit button is clicked , a dynamic array of those files paths has been made , and then I JSON encode that array, which is dynamically made, and insert it in a database table. Till the database insertion it is fine, but the problem occurs when i retrieve that array, using angular js http calls, that array is treated as a string, then I make it JSON.parse to convert it into array, so the $scope.im is basically that array which contains the parsed array.
Now,I am making html elements dynamically, they are populated with respect to the response from the ajax call, as much records i have in the database that much elements are made, but here in each element there is an image place, where i want to put the very first image on each element from the sub arrays. like on first element i want to put image from sub array 1 0th element files/file/img1.jpg, on second element i want to put image from sub array 2 0th element files/file1/img1.jpg and so on...
these are the elements made dynamically, the transparent one the image section.

This is how I parse the array.
$http({
method:"POST",
url:"files.php",
data:$.param({
tot_data:true
}),
headers:headers
}).then(function(res){
$scope.d = res.data;
$scope.im=[];
for(var i=0; i<$scope.d.length; i++){
$scope.im = JSON.parse($scope.d[i].imgs);
console.log($scope.im[i]);
}
});
This is the result I get on console:

But when I put it in the html
<p>{{im[0]}}</p>
Still I get the same path on each element, not as the result shown on console


{{im}}