Directive to directive communication using a service - angularjs

Question

I am attempting to perform the following. Use one directive to set information in a service.
Use another directive to retrieve information from this service. The directive setting the information seems to be doing it's job fine, however the one receiving the information does not react to it.
Below are how the directives look:
app.service('theStore',function(){
this.data;
});
app.directive('theOneThatSets', ['theStore', function(theStore){
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.click(function(event){
theStore.data = attrs.val;
});
}
};
}]);
app.directive('theOneThatReads', ['theStore', function(theStore){
return {
restrict: 'E',
template: '<stong>Received Text is - {{receivedValue}}</strong>',
link: function(scope, element, attrs) {
scope.$watch('theStore.data',function(newVal){
scope.receivedValue = theStore.data;
});
}
};
}]);
plnkr here: http://plnkr.co/edit/9EMIwhUcneQoopNqqWtV

Answer 1

I don't know if you can do watchers on things that are not in scope. The best way to communicate between controllers/services/directives is to use $rootScope, $broadcast, and $on.
Example using your code:
app.directive('theOneThatSets', ['$rootScope', function(theStore){
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.click(function(event){
//theStore.data = attrs.val;
$rootScope.$broadcast('changeThisValue', attrs.val); // Send
});
}
};
}]);
app.directive('theOneThatReads', [function(theStore){
return {
restrict: 'E',
template: '<stong>Received Text is - {{receivedValue}}</strong>',
link: function(scope, element, attrs) {
scope.$on('changeThisValue', function($event, value){
scope.receivedValue = theStore.data;
});
}
};
}]);
also, try creating a listener in your service like so:
app.service('myservice',function(){
this.listen = function($scope) {
$scope.$watch(function(){return someScopeValue},function(){
//$scope.dosomestuff();
});
}
});
//your controller
function myCtrl($scope,myservice) {
$scope.listen = function() {
myservice.listen($scope);
}
//call your method
$scope.listen();
}