Изменение размера окна трансляции на несколько контроллеров

Question

У меня есть приложение AngularJS, которое скрывает / отображает контент, используя отзывчивые утилиты Bootstrap.

<div class="d-none d-xl-block">
    //content   
</div>

У меня есть несколько угловых директив в представлении, изменяющем содержимое, в зависимости от того, какие значения возвращаются из контроллеров, и может быть до трех одинаковых директив из-за необходимости размещения для нескольких устройств. Это, очевидно, повлияет на производительность.

<div class="d-xl-none"> <!--all devices minus xl-->
    <div data-ng-if="$ctrl.patentFx.getSelectedPatent()">
    </div>
</div>

<div class="d-none d-xl-block"> <!--xl device only-->
    <div data-ng-if="$ctrl.patentFx.getSelectedPatent()">
    </div>
</div>

Функция $ctrl.patentFx.getSelectedPatent() удваивается из-за отзывчивых требований.

ngIf удаляет элементы из DOM, поэтому, если я верну значение в ngIf, в зависимости от размера экрана, я могу удалить неиспользуемое содержимое, предотвращая запуск функций до трех раз.

Проблема в том, что у меня есть десятки страниц, которые требуют этой логики. Я думал о добавлении функциональности к сервису, но, делая запрос от каждого контроллера, каждый раз, когда окно изменяет размеры (если пользователь перетаскивает окно, это может сделать запрос сотни раз), сервис не кажется наиболее эффективный способ.

Вопрос

Как сообщить десяткам контроллеров, что размер окна был изменен, без добавления функциональности к каждому отдельному контроллеру?

//Logic to be used for detecting window size

$window.on('resize', checkTemplateVisible);

function checkTemplateVisible(event){

     $timeout(function(){

          if($window.pageXOffset >= 769 && $window.pageXOffset < 993) {
            console.log('md')
          }

          if($window.pageXOffset >= 993 && $window.pageXOffset < 1201) {
            console.log('lg')
          }

          if($window.pageXOffset >= 1201) {
            console.log('xl')
          }


     })

}