Not able to pass scope to dialog in angular

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 ...