Why does fancybox not work correctly?

Question

Angular

Hello.
Began to fasten fancybox through the directive. Faced such a problem: the arrows for scrolling through the gallery are not displayed. That is, fancybox does not see the group and only shows the image that you click on in the popup.
Gallery template:

<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-4" ng-repeat="model in models">
  <div class="box">
    <h2 class="head">{{model[0]}}</h2>
    <div class="body">
      <a class="ref" fancybox="" data-fancybox-group="gallery1" ng-click="fancy($event)" href="../models/{{model[0]}}" title="{{lang.enlargeScreen}}">
        <img class="pic" ng-src="../models/{{model[1]}}" alt="" />
      </a>
    </div>
  </div>
</div>

The markup above is inserted into another intermediate template like this:

<div class="row content" ng-include="getTpl()"></div>

And the intermediate template is inserted into the ng-view of the main template.
fancybox directive:

app.directive('fancybox', function(){
    return {
        link: function($scope, element, attrs) {
            element.fancybox({
              helpers: {
                overlay: { locked: false },
                title: null
              }
            });
        }
    }
});

Answer 1

To group images, you need to specify the rel attribute with the same content in the link.