title: Sharing data between directives
body: <p>I have some data called <code>foo</code> which lives in a scope which is parent to three children:</p>
  
  <pre><code>&lt;div ng-init="foo=[1, 2, 3]"&gt;
      &lt;bar foo="{{foo}}" baz="{{odp}}" /&gt;
      &lt;mpq foo="{{foo}}" bats="{{maktz}}" /&gt;
      &lt;ktr foo="{{foo}}" otr="{{ompg}}" /&gt;
  &lt;/div&gt;
  
  bar.scope = {foo: '=', baz: '@'};
  mpq.scope = {foo: '=', bats: '@'};
  ktr.scope = {foo: '=', otr: '@'};
  </code></pre>
  
  <p>What is the best way to share <code>foo</code> between those three directives? Options include:</p>
  
  <ul>
  <li>Use an isolated scope to pass in <code>foo</code> three times, thereby duplicating it across four scopes</li>
  <li>Have the child directives inherit the parent scope, and find <code>baz</code>, <code>bats</code>, or <code>otr</code> on <code>attrs</code></li>
  <li>Put <code>foo</code> on the <code>$rootScope</code> and inject that into the child directives</li>
  </ul>
  
  <p>Or is there another approach that is better?</p>