title: AngularJS : Watch scope value of a injected service changed in one directive from another directive
body: <p>Consider the following scenario.</p>
  
  <p>There are two directives which is independent of each other and I want to share the scope between these two directives. Since they are not nested, I cant use a controller in the directives to share the scope. So I have created a service and injected the service to both of these directives.</p>
  
  <p>So when the value of the service is changed in one directive, I need the same to be updated in the other directive. How can I achieve this? I want this done right, the angular way, with no anti-patterns.</p>
  
  <p>This is what I have tried so far</p>
  
  <pre><code>.directive('d1', ['cData', function() {
    return {
      link: function() {
         // this watch is not working
         scope.$watch( function() {
              return cData.Value;
         }, function(newValue, oldValue) {
              alert(newValue);
         })
         }
    }
  })
  .directive('d2', ['cData', function() {
    return {
      link: function() {
        element.on('click', function() {              
          cData.Value = false
          scope.$digest();
        });
        // A watch here is working, I have commented it out
        /*scope.$watch( function() {
              return cd.showStatus;
        }, function(newValue, oldValue) {
              alert(newValue)
        })*/
      }
    }
  }])
  .service('cData', function() {
    this.Value = false;
  })
  </code></pre>
  
  <p>I am updating the value of the service in click event of directive <code>d2</code> and I need to trigger the watch in the directive <code>d1</code>. May be this is not working as the scopes are different for two directives. How can I achieve this, any help is greatly appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Template for directive <strong>d1</strong></p>
  
  <p><code>template : '&lt;div ng-class="{show:cData.Value==true}"&gt;&lt;/div&gt;'</code></p>
  
  <p>To update <code>{show:cData.Value==true}</code></p>
  
  <p>I have to again call scope.$apply() in the event listener of directive <code>d1</code></p>
  
  <p>Hope this is the right approach.</p>