title: What is the "right" way in Angularjs of doing "master-detail" inter directive communication
body: <p>I have a directive that displays a list of "master" items and when the user clicks on one of these items I want any "details" directives on the page (there could be more than one) to be updated with the details of the currently selected "master" item.</p>
  
  <p>Currently I'm using id and href attributes as a way for a "details" directive to find its corresponding master directive. But my impression is that this is not the angular way, so if it's not, what would be a better solution?</p>
  
  <p>I appreciate that typically when the issue of inter-communication between directives is raised then the obvious solutions are either to use require: "^master-directive" or to use a service, but in this case the directives are not in the same hierarchy and I don't think using a service is appropriate, as it would make the solution more complicated.</p>
  
  <p>This is some illustrative code showing what I'm doing currently.</p>
  
  <pre><code>&lt;div&gt;                                                                                                                                      
    &lt;master-list id="master1"&gt;&lt;/master-list&gt;                                                                     
  &lt;/div&gt;                                                                                                                                                 
  &lt;div&gt;                                                                                                                                
    &lt;details-item href="#master1" &gt;&lt;/details-item&gt;                             
  &lt;/div&gt;                                                                                                                                                 
  </code></pre>
  
  <p>In the master-list directive when an item is selected I set an attribute to indicate the currently selected master item:</p>
  
  <pre><code>attrs.$set('masterListItemId',item.id);
  </code></pre>
  
  <p>In the details-item directive's link function I do:</p>
  
  <pre><code>if (attrs.href) {
    var id = attrs.href.split('#')[1];
    var masterList = angular.element(document.getElementById(id));                                                                             
    if (masterList) {
      var ctrl = masterList.controller('masterList');
      ctrl.attrs().$observe('masterListItemId',function(value) {
          attrs.$set('detailItemId',value);
      });
    }
  }
  
  attrs.$observe('detailItemId',function(id) {
      // detail id changed so refresh
  });
  </code></pre>
  
  <p>One aspect that put me off from using a service for inter-directive communication was that it is possible (in my situation) to have multiple 'masterList' elements on the same page and if these were logically related to the same service, the service would end up managing the selection state of multiple masterList elements. If you then consider each masterList element had an associated detailItem how are the right detailItem elements updated to reflect the state of its associated masterList?</p>
  
  <pre><code>&lt;div&gt;                                                                                                                                      
    &lt;master-list id="master1"&gt;&lt;/master-list&gt;                                                                     
  &lt;/div&gt;                                                                                                                                                 
  &lt;div&gt;                                                                                                                                      
    &lt;master-list id="master2"&gt;&lt;/master-list&gt;                                                                     
  &lt;/div&gt;                                                                                                                                                 
  &lt;div&gt;                                                                                                                                
    &lt;details-item href="#master1" &gt;&lt;/details-item&gt;                             
  &lt;/div&gt;                                                                                                                                                 
  &lt;div&gt;                                                                                                                                
    &lt;details-item href="#master2" &gt;&lt;/details-item&gt;                             
  &lt;/div&gt;                                                                                                                                                 
  </code></pre>
  
  <p>Finally I was trying to use directives, rather than using controller code (as has been sensibly suggested) as I'd really like the relationship between a masterList and its associated detailItems to be 'declared' in the html, rather than javascript, so it is obvious how the elements relate to each other by looking at the html alone.</p>
  
  <p>This is particularly important as I have users that have sufficient knowledge to create a html ui using directives, but understanding javascript is a step too far.   </p>
  
  <p>Is there a better way of achieving the same thing that is more aligned with the angular way of doing things?</p>