title: Jquery ui resizable as Angular Directive
body: <p>I'm trying to implement Jquery ui resizable plugin as an Angular directive. It's almost successful. But when I set explicitly handler for resizable plugin I get an error whenever I click on any dom item.</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'ownerDocument' of undefined
  </code></pre>
  
  <p>Here is angular directive;</p>
  
  <pre><code>App.directive('resizable', function() {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
              $(element).resizable({
                  handles: { 's' : '.handle' }
              });
          }
      };
  });
  </code></pre>
  
  <p>Html;</p>
  
  <pre><code>&lt;div class="row list-box" resizable&gt;
  &lt;div class="handle ui-resizable-handle ui-resizable-n fa fa-ellipsis-h"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Also what's the best practice for using jquery ui with angularjs?  </p>
  
  <p>Thanks.</p>