Скрыть \ Показать нижний колонтитул страницы на основе слайда в карусели с ng-repeat AngularJS

Question

Добрый день, у меня карусель с ng-repeat. есть нижний колонтитул, который я хотел бы скрыть / показать на основе текущего активного слайда.

HTML:

<div id="myCarousel">
 <div class="carousel-inner">
      <div class="carousel-item upper" ng-class="{active:!$index}" ng-repeat="slide in slides" data-interval={{slide.timer}} data-footer={{slide.visibleFooter}}>
           <img class="d-block img-fluid" 
                ng-class="[{true: 'w-100 h-100'}[!slide.visibleFooter],{true: 'w-75'}[slide.visibleFooter]]" 
                ng-src="{{slide.image}}" alt={{$index}}>
            </div>
      </div>
 </div>
</div>
<footer class="page-footer" ng-if="footerEnabled">
   <div>RSS FEED</div>
   <div>Weather Widget</div>
   <div>Company logo</div>
</footer>

AngularJS:

$('#myCarousel').on('slid.bs.carousel', showFooter);
function showFooter() {
$scope.footerEnabled = document.getElementsByClassName("carousel-item upper active")[0].getAttribute("data-footer");
}

Нижний колонтитул отображается в зависимости от настроек изображения, но нижний колонтитул пуст. Показывает только пустую панель