Обмен данными между контроллерами в AngularJS (пример шины PubSub/Event)

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

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

Пример моей директивы:

(function (){

  "use strict";

  var app = angular.module('quickPreview');

  app.directive('previewProduct', function ($compile,$templateCache) {

      return {
        restrict: 'A',
        transclude: false,
        templateNamespace: 'html',
        scope: true,
        link: function(scope, element, attrs) {
          element.find('.sd-click-preview').bind('click', function (){


                var preview = angular.element($templateCache.get('quickpreview.html'));
                var cpreview = $compile(preview);

                element.find('.content-preview').html('');

                element.append(preview);

                cpreview(scope);

                element.addClass('view-expanded');
                $('body,html').animate({
                  scrollTop: element.offset().top
                }, "fast");
          });

        }
    };

  });

}(window, window.angular));

Пример шаблона, скомпилированного внутри li

<script type="text/ng-template" id="quickpreview.html">
  <div class="content-preview">
    <div class="content-preview-inner">
        <span class="full-preview"></span>
        <span class="close-preview"></span>
        <div class="block block-left left">
          <div class="content-tabs">
            <div class="tabs-content vertical">
              <div class="content active" id="panel1">
                <div class="content-img">
                  <div class="main-img">
                    <img ng-src="{{product.mainImage}}" alt="">
                  </div>
                  <div class="thumbnails">
                    <a class="th" role="button" aria-label="Thumbnail" href="">
                      <img aria-hidden=true src=""/>
                    </a>
                  </div>
                </div>
                <div class="details">
                   <h3 class="title-product">{{product.brand}}</h3>
                   <p class="title-desc">{{product.descriptionExcerpt}}</p>
                   <p class="block-price">{{product.price}} <small>{{product.priceBefore}}</small><small>({{product.priceDiscount}})</small></p>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</script>

Здесь я компилирую свой шаблон

<li ng-init='product = {id: "<%=product.id%>", brand: "<%=product.name_short%>", descriptionExcerpt: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas laudantium commodi veniam incidunt, fugit molestias voluptatibus sint facere sapiente temporibus quidem, sequi deleniti saepe, atque obcaecati dicta, assumenda nisi a!", price: "£103", priceBefore: "£123", priceDiscount: "Save 10%", mainImage: "<%=raw(main_image.url(:huge))%>", masterVariant: {id: "<%=product.master.id%>"}, variants: [{id: "0", name: "Lorem ipsum", price: "£123", available: true }, {id: "1", name: "Lorem ipsum", price: "£13", available: false }]}' preview-product>

<!-- Here I compile my template -->

</li>

Надеюсь, кто-нибудь поможет мне с этим.