title: How share Service dynamic data between Controllers and Directives
body: <p>I'd like to know what pattern to use, if I need my Service to share it's dynamic data between Controller, Directives, etc. The reason I mention dynamic, is because I'd like to load new data and this data needs to be available in any other Controller, Directive, etc. For example, if a Directive generates a UL LI, it would have to re-generate it if the data inside the Service has changed!</p>
  
  <p>I've initially opened the following ( <a href="https://stackoverflow.com/questions/19126172/how-to-create-reset-method-in-service-that-return-promise">How to create reset() method in Service that return promise?</a> ) and someone pointed to me that I should use the Observer Pattern. Which I'm very grateful and I wrote this very quickly as a spike of what I need to do and comments would be extremely appreciated ( <a href="http://jsbin.com/epAMaP/1" rel="nofollow noreferrer">http://jsbin.com/epAMaP/1</a> )</p>
  
  <pre><code>var MyApp = angular.module('MyApp', []);
  
  MyApp.config(function($locationProvider){
  
    $locationProvider.hashPrefix('!');
  
  });
  
  MyApp.factory('MyService', function($timeout){
  
      var data;
  
      var loadData = function(){
  
          data = {
              foo: "bar",
              time: new Date()
          };
  
          return data;
  
      };
  
      return {
  
          refresh: function(){
  
              loadData();
  
          },
  
          getData: function(){
  
              return loadData();
  
          }
  
      };
  
  });
  
  MyApp.controller('MyCtrl', function($scope,MyService,$timeout){
  
    $scope.foo = "Service share data";
  
    $scope.data = MyService.getData();
  
    $scope.$on("eventFoo", function(){
      console.log("Data has changed!");
      console.log($scope.data);
    });
  
    $timeout(function(){
      MyService.refresh();
      $scope.$apply(function(){
          $scope.data = MyService.getData();
  
          $scope.$emit("eventFoo");
      });
    }, 3000);
  
  });
  
  MyApp.directive('myDirective', function(MyService,$timeout){
  
      return {
          restrict: 'A',
          link: function(scope, elem, attrs){
              scope.$on("eventFoo", function(){
                  console.log("Event foo triggered!");
  
                  scope.data = MyService.getData();
  
                  console.log(scope.data);
              });
          }
      };
  
  });
  </code></pre>
  
  <p>I think this would solve most of my problems but there's something that I need to remember. The data that I'll load comes from $http GET, so I think that I need to use at least a promise every time I need to update or load data, then trigger the right event.</p>
  
  <p>My lack of experience with AngularJs drive me into question my thoughts, so any help or advice is extremely appreciated!</p>
  
  <p>Thanks for looking!</p>