title: AngularJS Directive for ElevateZoom jQuery Plugin
body: <p>I'm trying to use the <a href="http://www.elevateweb.co.uk/image-zoom">ElevateZoom</a> jQuery plugin inside an angular app.</p>
  
  <p>Essentially, to use ElevateZoom normally, you create an image as follows:</p>
  
  <pre><code>&lt;img id="my-img" src="small.jpg" data-zoom-image="big.jpg" /&gt;
  </code></pre>
  
  <p>Then in your application JS:</p>
  
  <pre><code>$('#my-img').elevateZoom(options);
  </code></pre>
  
  <p>This works fine in a standard app. But when I try and do it in my AngularJS app using a directive (I followed some SO answers for getting jquery plugins into angular with directives) I just can't make it work.</p>
  
  <p><strong>Live editable demo on Plunkr: <a href="http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview">http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview</a></strong></p>
  
  <p>My directive looks like:</p>
  
  <pre><code>app.directive('ngElevateZoom', function() {
    return {
      restrict: 'A',
      scope: true,
      compile: function(scope, element, attrs) {
        $(element).elevateZoom(scope.$eval(attrs.elevateZoom));
      }
    };
  });
  </code></pre>
  
  <p>And my HTML looks like this:</p>
  
  <pre><code>&lt;img ng-elevate-zoom ng-src="{{small_image}}" data-zoom-image="{{large_image}}" /&gt;
  </code></pre>
  
  <p>What am I doing wrong? I've only been experimenting with Angular a few days so go easy on me ;)</p>