title: Calling functions between directives
body: <p>I am currently building my very first APP using angular and I find myself a bit lost, will appreciate any help regarding the following topic. </p>
  
  <p>I have a single page app with two panels. The left side panel displays a list of items (let's say news), and the right side panel displays the details of any of the available news. I want to be able to click on any of the items listed on the left panel and read the details on the right panel.</p>
  
  <p>A sample HTML/JS code for this model will be as followed (This code will not work as it is):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="leftPanel"&gt;
      &lt;news-list&gt;&lt;/news-list&gt;
  &lt;/div&gt;
  &lt;div id="rightPanel"&gt;
      &lt;news-detail&gt;&lt;/news-detail&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript/Angular:</p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.directive('newsList', function () {
      return{
          restrict: 'E',
          templateUrl: 'templates/news-list.html',
          controller: function ($show) {
              $scope.clickAction(item){
                  data = ....some JSON http request...
                  showDetail(data);
              }
          },
          controllerAs: 'listing'
      };
  });
  
  app.directive('newsDetail', function () {
      return{
          restrict: 'E',
          templateUrl: 'templates/news-detail.html',
          controller: function ($scope) {
              $scope.showDetail(data){
                  ....
              }
          },
          controllerAs: 'detail'
      };
  });
  </code></pre>
  
  <p>As you can see, the showDetail() function from newsDetail has to  be called from the newsList directive controller above. The click action event is called from the different elements within the news list template.</p>
  
  <p>The question is: ¿How can I call a function within a controller from another controller when inside a directive?</p>
  
  <p>Thanks</p>