ng-click doesn't work with fotorama plugin

Question

I'm using Fotorama plugin with AngularJS. If I put ng-click directive inside Fotorama markup, it doesn't trigger the handler. Here is my sample markup:

<div class="fotorama" data-click="false">
    <div onclick="myJsHandler()">
        <img src="/images/2.png"/>
    </div>
    <div ng-click="myNgHandler()">
        <img src="/images/1.png"/>
    </div>
</div>

The first handler (non-angular) works fine but the second doesn't. It seems that the reason is that Fotorama rebuilds the DOM, and AngularJS doesn't know about these changes. The only workaround I found requires to use $compile service directly from non-Angular code:

$(function(){
    $(".fotorama").each(function() {
        var content = $(this);
        angular.element(document).injector().invoke(function($compile) {
            var scope = angular.element(content).scope();
            $compile(content)(scope);
        });
    });
});

Is there any better way to integrate Fotorama with AngularJS?

Answer 1

There is an fotorama module for angular https://github.com/tamtakoe/ap.fotorama