title: Sharing data between controllers in AngularJS (PubSub/Event bus example)
body: <p>I have a page with a list of product. I have a li with my directive that it does is that when I click on a link it is inside of the li and compiled a template inside of the li and show my template.</p>
  
  <p>What I do it is when I click on a product .. show my template and if I click on another product that I want to hide the previous template and show the template in the product where I clicked And do not know how I can do this with angular.</p>
  
  <p>Example of my directive:</p>
  
  <pre><code>(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));
  </code></pre>
  
  <p><strong>Example of template that compiled inside the li</strong></p>
  
  <pre><code>&lt;script type="text/ng-template" id="quickpreview.html"&gt;
    &lt;div class="content-preview"&gt;
      &lt;div class="content-preview-inner"&gt;
          &lt;span class="full-preview"&gt;&lt;/span&gt;
          &lt;span class="close-preview"&gt;&lt;/span&gt;
          &lt;div class="block block-left left"&gt;
            &lt;div class="content-tabs"&gt;
              &lt;div class="tabs-content vertical"&gt;
                &lt;div class="content active" id="panel1"&gt;
                  &lt;div class="content-img"&gt;
                    &lt;div class="main-img"&gt;
                      &lt;img ng-src="{{product.mainImage}}" alt=""&gt;
                    &lt;/div&gt;
                    &lt;div class="thumbnails"&gt;
                      &lt;a class="th" role="button" aria-label="Thumbnail" href=""&gt;
                        &lt;img aria-hidden=true src=""/&gt;
                      &lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="details"&gt;
                     &lt;h3 class="title-product"&gt;{{product.brand}}&lt;/h3&gt;
                     &lt;p class="title-desc"&gt;{{product.descriptionExcerpt}}&lt;/p&gt;
                     &lt;p class="block-price"&gt;{{product.price}} &lt;small&gt;{{product.priceBefore}}&lt;/small&gt;&lt;small&gt;({{product.priceDiscount}})&lt;/small&gt;&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Here I compile my template</strong></p>
  
  <pre><code>&lt;li ng-init='product = {id: "&lt;%=product.id%&gt;", brand: "&lt;%=product.name_short%&gt;", 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: "&lt;%=raw(main_image.url(:huge))%&gt;", masterVariant: {id: "&lt;%=product.master.id%&gt;"}, variants: [{id: "0", name: "Lorem ipsum", price: "£123", available: true }, {id: "1", name: "Lorem ipsum", price: "£13", available: false }]}' preview-product&gt;
  
  &lt;!-- Here I compile my template --&gt;
  
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>I hope someone can guide me with this.</strong></p>