Create a md-dialog box for image upload with image view, crop and upload in angularjs
<p>I want to create a md-dialog box using Angular material which show the choose file option for image selection. Once image selected, it should show the image and provide crop facility and also provide the preview of the crop image.
For cropping, I am using <a href="https://github.com/alexk111/ngImgCrop" rel="nofollow">ng-img-crop</a></p>

<p>Below is my link which trigger the md-dialog:</p>

<pre><code>&lt;span class="edit_image" ng-click="uploadPic()"&gt;
</code></pre>

<p>Below is my controller function called by above function:</p>

<pre><code>$scope.uploadPic = function(ev){
        var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  &amp;&amp; $scope.customFullscreen;
         $mdDialog.show({
            controller: imageUploadCtrl,
            templateUrl: 'uploadImage.tmpl.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: useFullScreen
        });
</code></pre>

<p>Below is my html template which i am using:</p>

<p></p>

<pre><code>&lt;div&gt;Select an image file: &lt;input type="file" id="fileInput" /&gt;&lt;/div&gt;
&lt;div class="cropArea"&gt;
    &lt;img-crop image="myImage" result-image="myCroppedImage"&gt;&lt;/img-crop&gt;

&lt;/div&gt;
    &lt;div&gt;Cropped Image:&lt;/div&gt;
    &lt;div&gt;&lt;img ng-src="{{myCroppedImage}}" /&gt;&lt;/div&gt;
&lt;md-dialog-actions layout="row"&gt;
    &lt;md-button ng-click="cancel()"&gt;
        Cancel
    &lt;/md-button&gt;
    &lt;span flex&gt;&lt;/span&gt;
    &lt;md-button type="submit" class="md-raised md-primary" ng-click="saveImage()"&gt;
        Upload
    &lt;/md-button&gt;
&lt;/md-dialog-actions&gt;
</code></pre>

<p></p>

<p>Image upload controller :</p>

<pre><code>function imageUploadCtrl($scope, $mdDialog){

        $scope.myImage='';
        $scope.myCroppedImage='';

        var handleFileSelect=function(ev) {
            console.log('trigger');
            var file=ev.currentTarget.files[0];
            var reader = new FileReader();
            reader.onload = function (ev) {
                $scope.$apply(function($scope){
                $scope.myImage=ev.target.result;
                });
            };
            reader.readAsDataURL(file);
        };
        angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);

        $scope.hide = function () {
            $mdDialog.hide();
        };
        $scope.cancel = function () {
            $mdDialog.cancel();
        };
        $scope.saveImage = function () {
            Notifier.success("Image Uploaded Sucessfully");
            $mdDialog.hide();
        };
    }
</code></pre>

<p>Above code is perfectly working, if I am doing this process in a new page. But not working in md-dialog box. Can anyone please help me to complete it.</p>