How share Service dynamic data between Controllers and Directives

How share Service dynamic data between Controllers and Directives

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!
I've initially opened the following ( How to create reset() method in
Service that return promise? ) 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 ( http://jsbin.com/epAMaP/1 )
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);
});
}
};
});
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.
My lack of experience with AngularJs drive me into question my thoughts,
so any help or advice is extremely appreciated!
Thanks for looking!