I am experiencing an issue with displaying captions on image modals.
.controller('HomeController',['dataProvider','$scope','$location', '$modal', '$log', 'authService',
function(dataProvider, $scope, $location,$modal, $log, authService){
$scope.imageurl = [
{
'url': '/uploads/home/tenda kerucut.jpg',
'thumbUrl': '/uploads/home/tenda kerucut.jpg',
'caption': 'Tenda Kerucut',
'size': 'Ukuran 3x3 m, 5x5 m'
},
{
'url': '/uploads/home/tenda konvensional.jpg',
'thumbUrl': '/uploads/home/tenda konvensional.jpg',
'caption': 'Tenda Konvensional',
'size': ''
}
];
$scope.open = function (item) {
var modalInstance = $modal.open({
templateUrl: '/partials/layouts/modal-home.html',
controller: 'ModalInstanceCtrl',
resolve: {
imageurl: function(){
return item;
}
}
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
}])
.controller('ModalInstanceCtrl', function ($scope, $modalInstance, imageurl) {
$scope.item = imageurl;
});
This is my view
<div class="ui-product-thumbs grid-33" ng-repeat="image in imageurl">
<a ng-click="open(image.url)">
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail" alt="">
</a>
<div class="ui-product-info">
<p>{{image.caption}}</p>
<div class="text-center">{{image.size}}</div>
</div>
</div>
and this is my modal
<div class="modal-body">
<img class="img-full-width" ng-src="{{item}}">
<p>{{image.size}}</p>
</div>
When I run the codes, the caption of the image does not show up on the modal. Can someone please assist me in resolving this issue? How can I display the caption on the modal when it is clicked?