title: how to fix this AngularJS JCrop directive?
body: <p>I'm trying to use JCrop with AngularJS. I have the following directive that I need help to fix a bit:</p>
  
  <pre><code>.directive('imgCropped', function() {
      return {
          restrict: 'E',
          replace: true,
          scope: { src:'@', selected:'&amp;' },
          link: function(scope,element, attr) {
              var myImg;
              var clear = function() {
                  if (myImg) {
                      myImg.next().remove();
                      myImg.remove();
                      myImg = undefined;
                  }
              };
              scope.$watch('src', function(nv) {
                  clear();
                  if (nv) {
                      element.after('&lt;img /&gt;');
                      myImg = element.next();
                      myImg.attr('src',nv);
  
                      $(myImg).Jcrop({
                          trackDocument: true,
                          onSelect: function(x) {
                              /*if (!scope.$$phase) {
                                  scope.$apply(function() {
                                      scope.selected({cords: x});
                                  });
                              }*/
                              scope.selected({cords: x});
                          },
                          aspectRatio: 1,
                          boxWidth: 400, boxHeight: 400,
                          setSelect: [0, 0, 400, 400]
                      });
                  }
              });
  
              scope.$on('$destroy', clear);
          }
      };
  })
  </code></pre>
  
  <p>the problem is that JCrop doesn't detect the true image size correctly and I need to add a trueSize option, the only way that I know how to do is to wrap the Jcrop invocation in a callback, looks pretty nasty.</p>
  
  <p>also, if I use scope.$apply in the onSelect callback I get the $digest already in progress error.  why is that ?</p>
  
  <p>EDIT: I can successfully get the true image size with the following code, but there must be a better way to do so</p>
  
  <pre><code>.directive('imgCropped', function() {
      return {
          restrict: 'E',
          replace: true,
          scope: { src:'@', selected:'&amp;' },
          link: function(scope,element, attr) {
              var myImg;
              var clear = function() {
                  if (myImg) {
                      myImg.next().remove();
                      myImg.remove();
                      myImg = undefined;
                  }
              };
              scope.$watch('src', function(nv) {
                  clear();
                  if (nv) {
                      element.after('&lt;img /&gt;');
                      myImg = element.next();
                      myImg.attr('src',nv);
  
                      var temp = new Image();
                      temp.src = nv;
                      temp.onload = function() {
                          var width = this.width;
                          var height = this.height;
  
                          $(myImg).Jcrop({
                              trackDocument: true,
                              onSelect: function(x) {
                                  /*if (!scope.$$phase) {
                                   scope.$apply(function() {
                                   scope.selected({cords: x});
                                   });
                                   }*/
                                  scope.selected({cords: x});
                              },
                              aspectRatio: 1,
                              boxWidth: 400, boxHeight: 400,
                              setSelect: [0, 0, 400, 400],
                              trueSize: [width, height]
                          });
                      }
                  }
              });
  
              scope.$on('$destroy', clear);
          }
      };
  })
  </code></pre>