Not able to pass scope to dialog in angular - angularjs

Question

I am displaying a list of images using Angular.
When an image is clicked I want to display a dialog with the image and more info.
So when opening the modal I need to pass the scope, or at least, the image.
Note: I am using ngDialog for the popup.
application.controller('ImageController', function ImageController($scope, ImageService, ngDialog) {
$scope.model = {
images: [],
loading: false
}
var load = function () {
$scope.model.loading = true;
ImageService.GetList($scope.model.pages.instagram)
.success(function (data, status, headers, config) {
$scope.model.images = $scope.model.images.concat(data.Images)
})
.error(function (data, status, headers, config) { })
.finally(function () {
$scope.model.loading = false
});;
}
$scope.open = function (image) {
ngDialog.open({
template: '<p>my template {{image.Key}} </p>',
plain: true,
scope: $scope
});
};
load();
});
<div data-ng-app="Application" data-ng-controller="ImageController">
<div data-ng-repeat='image in model.images'>
<img src="{{image.Url}}" alt="" data-ng-click="open(image)"/>
</div>
The images are displayed and the dialog is opened on click ...
However, somehow, I am not able to access the scope inside the template.
The following works:
$scope.open = function (image) {
ngDialog.open({
template: '<p>my template' + image.Key + '</p>',
plain: true
});
};
But this does not work:
$scope.open = function (image) {
ngDialog.open({
template: '<p>my template {{image.Key}} </p>',
plain: true,
scope: $scope
});
};
Does anyone has any idea why?
I haven't been able to figure this out.

Answer 1

change your open method to following..
$scope.open = function (image) {
var newScope = $scope.$new();
newScope.image = image;
ngDialog.open({
template: '<p>my template {{image.Key}} </p>',
plain: true,
scope: newScope
});
};
This should work ...

Answer 2

The best way that works for me is without scope. just use data attribute:
$scope.open = function (image) {
ngDialog.openConfirm({
template: 'views/alertTemplate.html'
showClose: false,
data: {
image: image,
}
});
}
and in your template file:
<div class="alert-dialog-container">
<div class="alert-dialog-body">
<p ng-bind-html="ngDialogData.image"></p>
</div>
<div class="alert-dialog-footer">
<button ng-click="confirm()">OK</button>
</div>
</div>