Проблемы с LightGallery и Angular

Question

У меня проблема с использованием световой галереи на странице. В частности, c я использую AngularJS (1.7) для загрузки некоторого динамического c содержимого, и мне нужно, чтобы изображения, которые я получил из объекта ответа, создавали галерею.

* Код 1022 * имеет атрибут display: none, пока я не проверю значение, а затем сделаю его видимым для пользователя. Это код html:

<div class="product-content">
<div class="col-12 product" ng-repeat="item in itemList">
      <div class="row align-items-center">
                    <div class="col-6 col-lg-2 lightgallery-extra">
                        <a href="/assets/images/placeholder.jpg" class="content-image fill-image item">
                            <img style="height: 10rem; width: auto;" src="/assets/images/placeholder.jpg" alt="" class="item">
                        </a>
                    </div>
      </div>
</div>
</div>

И код, который заставляет меня визуализировать фрагмент, вставлен в файл angular. Вот функция.

$scope.checkAvailability = function () {
        $scope.dateValue = $(".datepicker-bike").val();
        console.info($scope.dateValue);
        $http({
            method: 'POST',
            url: '/home/getItem',
            params: { date: $scope.dateValue },
            async: false
        }).then(function success(response) {
            $scope.itemList = response.data;
            $('.product-content').show();
            
            var $methods = $('.lightgallery-extra');
            console.info($methods);
            $methods.lightGallery();
            $methods.data('lightGallery').destroy(true);
            $methods.lightGallery({
                thumbnail: true,
                animateThumb: true,
                showThumbByDefault: true,
            });
            
        }, function error(response) {
                $('.product-content').hide();
        });
    };

Но когда я нажимаю на изображение (фактически не определенное динамически), lightGalley не открывается, и в строке

$methods.data('lightGallery').destroy(true);

Это говорит мне следующая ошибка:

TypeError: Cannot read property 'destroy' of undefined

Кажется, что у lightGallery есть некоторые проблемы, но при вызове функции lightGallery () ошибка не возникает. Так что я немного застрял, есть ли у вас какие-нибудь предложения по решению и есть оперативная световая галерея?

Большое спасибо за помощь.