crop doesn't work inside bootstrap modal

Question

i'm using ngimgcrop to crop images and it works fine in but I tried to display the images inside uibmodal it doesn't work. I tried some solutions(use ng-init ..)but None worked for me. and in the console the image is empty.

here is my controller :

 var app = angular.module('app', ['ngImgCrop', 'ui.bootstrap']);

    app.controller('Ctrl',  ['$scope',
        '$rootScope',
        '$uibModal',
        '$log',
        function($scope,
                 $rootScope,
                 $uibModal,
                 $log) 
        {



            $scope.animationsEnabled = true;
            $scope.open = function (size) {
                // alert('open mthod is called');
                $scope.test = 5;
                var modalInstance = $uibModal.open({
                    animation: true,
                    ariaLabelledBy: 'modal-title',
                    ariaDescribedBy: 'modal-body',
                    templateUrl: "imageModal.html",
                    controller: 'Ctrl',
                    controllerAs: '$ctrl',
                    size: size

                });

                modalInstance.result.then(function (selectedItem) {
                    $log.info('selected value:'+selectedItem);
                }, function () {
                    $log.info('Modal dismissed at: ' + new Date());
                });
            };

            $scope.size='small';
            $scope.type='circle';
            $scope.imageDataURI='';
            $scope.resImageDataURI='';
            $scope.resImgFormat='image/png';
            $scope.resImgQuality=1;
            $scope.selMinSize=100;
            $scope.resImgSize=200;
            $scope.test=225;
            //$scope.aspectRatio=1.2;
            $scope.onChange=function($dataURI) {
                console.log('onChange fired');
            };
            $scope.onLoadBegin=function() {
                console.log('onLoadBegin fired');
            };
            $scope.onLoadDone=function() {
                console.log('onLoadDone fired');
            };
            $scope.onLoadError=function() {
                console.log('onLoadError fired');
            };

        $scope.uploadFile = function(file) {
            if (file) {
                // ng-img-crop
                var imageReader = new FileReader();
                imageReader.onload = function(image) {
                    $scope.$apply(function($scope) {
                        $scope.imageDataURI= image.target.result;
                    });
                };
                imageReader.readAsDataURL(file);
                 $scope.open();
            }
        };

            console.log(' my image', $scope.imageDataURI);

            $scope.$watch('resImageDataURI',function(){
            console.log('Res image', $scope.resImageDataURI);
                    });
            }]);

imagemodal.html :

<div ng-if="enableCrop=true" class="cropArea"   ng-class="{'big':size=='big', 'medium':size=='medium', 'small':size=='small'}">

<img-crop image="imageDataURI"
          result-image="$parent.resImageDataURI"

          change-on-fly="changeOnFly"
          area-type="{{type}}"
          area-min-size="selMinSize"
          result-image-format="{{resImgFormat}}"
          result-image-quality="resImgQuality"
          result-image-size="resImgSize"
          on-change="onChange($dataURI)"
          on-load-begin="onLoadBegin()"
          on-load-done="onLoadDone()"
          on-load-error="onLoadError()"
></img-crop>
<!--aspect-ratio="aspectRatio"-->

Demo: demo

Answer 1

If yout want to show cropped image from controller to modal, using resolve in this parametr put variable result-image of img-crop. just like :

var modalInstance = $uibModal.open({
                animation: true,
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: "imageModal.html",
                controller: 'Ctrl',
                controllerAs: '$ctrl',
                size: size,
                resolve:{
                    croppedImg:$scope.imageCrop
                }

            });

when your imageCrop look like

<img-crop image="imageDataURI"
      result-image="imageCrop"

in modal controler inject croppedImg as normal provider/service/factory just like:

function Ctrl($scope, croppedImg, ..another, ..etc)

in this way, in controller you got cropped image in your modal controler. Then only

$scope.newImg = croppedImg

and show in modal as <img src="{{newImg}}">

Hope you understand.