Load dynamic images on Angularjs - angularjs

Question

I'm new to angularjs and I need to display an image when a thumbnail is clicked.
I wanted to display its Preview picture. It will be fetched on my database.
My Database table on mysql goes something like this:
Materials:{
[name:'material1',
thumbnail:'thumbnail1',
preview:'preview1'],
[name:'material2',
thumbnail:'thumbnail2',
preview:'preview2']
}
I'm also using Laravel as my backend framework. The list of materials are now Displaying but when I clicked on the thumbnail the preview image didn't appear. Is there any way i can fix this?
var imageCtrl = function($scope, $http) {
$scope.materials = [];
$scope.init = function(){
$http.get('api/materials').
success(function(data, status, headers, config){
$scope.materials = data;
});
}
$scope.loadimage = function() {
$scope.image.path = $scope.materials.preview;
}
};
app.controller('imageCtrl', imageCtrl);
<div ng-controller="imageCtrl">
<ul>
<li ng-repeat='material in materials'>
<div>#{{material.name}}</div>
<img ng-src="#{{material.thumbnail}}" alt="" ng-click="loadimage()>
</li>
</ul>
<img ng-src="#{{image.path}}" alt="">
</div>

Answer 1

On your html page, pass current material object to loadImage function.
<div ng-controller="imageCtrl">
<ul>
<li ng-repeat='material in materials'>
<div>{{material.name}}</div>
<img ng-src="{{material.thumbnail}}" ng-click="loadimage(material)>
</li>
</ul>
<img ng-src="{{image.path}}" alt="">
</div>
and then from inside controller, update image object.
$scope.loadimage = function(material) {
$scope.image.path = $scope.material.preview;
}