AngularJS: how to recompile data changes by directive

I am trying to implement lightSlider ( http://sachinchoolur.github.io/lightslider/ ) in a popup that can be opened when the user clicks on the image.

There are many images on the page and anyone can open the popup with a lightSlider. The content of the gallery is different every time.

The problem is that lightGallery is wrapping the div with a lot of extra divs. So every time the "media" changes, I need to find a way to delete the entire element and create a new template and run lightGallery on it.

Little help please ...

Thank!

App.directive('lightGallery', function($compile) {
    return {
        restrict: 'AE',
        scope: {
            media: '='
        },
        compile: function CompilingFunction($templateElement, $templateAttributes) {
            $('.lSSlideOuter').remove();
            $templateElement.replaceWith(this.template);
            return function LinkingFunction($scope, $element, $attrs) {
                $('#imageGallery').lightSlider({
                    gallery:true,
                    item:1,
                    thumbItem:9,
                    slideMargin:0,
                    currentPagerPosition:'center'
                });
            };
        },
        template: '<ul id="imageGallery">'+
                    '<li ng-repeat="item in media.media" data-thumb="{{item.picture}}" data-src="{{item.source}}">'+
                        '<img src="{{item.source}}" />'+
                    '</li>'+
                  '</ul>'
    }
});