title: AngularJS: sharing data between directive and external controller
body: <p>Basically I have:</p>
  
  <ul>
  <li>directive,</li>
  <li>data service with a promise</li>
  <li>shared service to store data retrieved</li>
  <li>control which should be updated whenever the directive invoke a data request on the data service.</li>
  </ul>
  
  <p>Relevant snippets following.</p>
  
  <p>Let's say the html inside directive <code>gerSearkator</code> contain a button which, when clicked,<br>
  executes the <code>getResults()</code> function defined inside the directive link.</p>
  
  <p>It should call the service <code>gerSearch</code>, update the <code>gerSearchResults</code> service, which in turn<br>
  should update the <code>$scope</code> inside <code>ResultsController</code>and consequently the view binded to it.</p>
  
  <p>But... why it does not work?</p>
  
  <p><strong>DIRECTIVE</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('ger.directives').directive('gerSearkator', ['$http', 'gerSearch',    
          'gerSearchResults',
  function($http, search, searchResults) {
    return {
      restrict: 'A',
      scope: {
          ngModel: '='
      },
      replace: true,
      templateUrl: 'js/directives/searkator.html',
      link: function($scope, $element, $attrs) {
          $scope.src.getResults = function() {
              search.get($scope.src.params).then(
                  // success
                  function(data, status, headers, config) {
                      searchResults.resultsData = data;                       
                  },
                  // error
                  function(data, status, headers, config) {
                      // manage error...
                  }
              );
          };
      }
  }
  }]);
  </code></pre>
  
  <p><strong>DATA SERVICE</strong></p>
  
  <pre class="lang-js prettyprint-override"><code> angular.module('ger.services').factory('gerSearch', ['$http', '$q', 'gerConfig',
   function($http, $q, config) {  
      return {
          // "params" is an object
          get: function(params) {
              var d = $q.defer();
  
              $http.get(config.searchResultsPath, {params: params})
                  .success(function(data, status, headers, config) {  
                      d.resolve(data, status, headers, config);
                  })
                  .error(function(data, status, headers, config) {                
                      d.reject(data, status, headers, config);
                  }
              );
  
              return d.promise;
          }
      };  
      }]);
  </code></pre>
  
  <p><strong>SHARED SERVICE</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('ger.services').factory('gerSearchResults', function() { 
      return {
          resultsData: {}
      };  
  });
  </code></pre>
  
  <p><strong>CONTROL TO UPDATE</strong></p>
  
  <pre class="lang-js prettyprint-override"><code> angular.module('ger').controller('ResultsController', function($scope, gerSearchResults) { 
      $scope.searchResults = gerSearchResults.resultsData;    
   });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app="ger"&gt;
  &lt;!-- search box--&gt;
  &lt;div ger-searkator&gt;&lt;/div&gt;
  
  &lt;!-- tabs --&gt;
  &lt;div class="row" ng-controller="ResultsController"&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;code&gt;{{searchResults}}&lt;/code&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So far I have been able to solve the problem using:</p>
  
  <pre class="lang-html prettyprint-override"><code>$scope.$on('searchDataUpdated', function() {
      $scope.searchResults = gerSearchResults.resultsData;
  });
  </code></pre>
  
  <p>But... is it the right way?</p>
  
  <p>I added a plunker to better explain the problem (removing the use of $scope.$on('searchDataUpdated'... <a href="http://plnkr.co/edit/yorXy5SaAbAZKXRoo4vv?p=preview" rel="nofollow">http://plnkr.co/edit/yorXy5SaAbAZKXRoo4vv?p=preview</a></p>
  
  <p>Basically, when I click on the button I would like to populate the table with retrieved data.</p>