Estoy tratando de usar elElevateZoom jQuery plugin dentro de una aplicación angular.

Esencialmente, para usar ElevateZoom normalmente, crea una imagen de la siguiente manera:

<img id="my-img" src="small.jpg" data-zoom-image="big.jpg" />

Luego en su aplicación JS:

$('#my-img').elevateZoom(options);

Esto funciona bien en una aplicación estándar. Pero cuando intento hacerlo en mi aplicación AngularJS usando una directiva (seguí algunas respuestas SO para convertir los complementos de jquery en angulares con directivas) simplemente no puedo hacer que funcione.

Demo editable en vivo en Plunkr:http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview

Mi directiva se ve como:

app.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    scope: true,
    compile: function(scope, element, attrs) {
      $(element).elevateZoom(scope.$eval(attrs.elevateZoom));
    }
  };
});

Y mi HTML se ve así:

<img ng-elevate-zoom ng-src="{{small_image}}" data-zoom-image="{{large_image}}" />

¿Qué estoy haciendo mal? Solo he estado experimentando con Angular unos días, así que no me molestes;)