title: ngImgCrop not working inside UI Modal
body: <p>I am using the ngImgCrop angular directive to resize and crop an image. However when I try and use it inside a UI Modal controller it doesn't work. </p>
  
  <p>The issue I believe is that the below line does not get properly set because the DOM is not created. The handlefileselect function never gets called?!</p>
  
  <p>Does anybody know how to properly use this directive inside a Modal or how to make this work?</p>
  
  <pre><code>angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
  </code></pre>
  
  <p>The modal contoller code is here</p>
  
  <pre><code>.controller('ProfilePictureModalInstanceCtrl', function ($scope, $modalInstance, items,$timeout) {
  
      $scope.myImage = '';
      $scope.myCroppedImage = '';
  
      var handleFileSelect = function (evt) {
  
          alert("Here");
  
          var file = evt.currentTarget.files[0];
          var reader = new FileReader();
          reader.onload = function (evt) {
              $scope.$apply(function ($scope) {
                  $scope.myImage = evt.target.result;
              });
          }
          reader.readAsDataURL(file);
      }
  
  
      angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
  
      $scope.ok = function () {
          $modalInstance.close($scope.optionItems);
      };
  
      $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
      };
  });
  </code></pre>