Estou tentando usar oElevateZoom plugin jQuery dentro de um aplicativo angular.

Essencialmente, para usar o ElevateZoom normalmente, você cria uma imagem da seguinte maneira:

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

Em seguida, no seu aplicativo JS:

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

Isso funciona bem em um aplicativo padrão. Mas quando tento fazê-lo no meu aplicativo AngularJS usando uma diretiva (segui algumas respostas SO para obter plug-ins de jquery em angular com diretivas), simplesmente não consigo fazê-lo funcionar.

Demonstração editável ao vivo no Plunkr:http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview

Minha diretiva se parece com:

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

E meu HTML fica assim:

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

O que estou fazendo errado? Eu só estou experimentando o Angular há alguns dias, então vá com calma;)