title: AngularJS: Share data between different controllers
body: <p>I have the following structures</p>
  
  <pre><code>&lt;div ng-controller='ctrlA'&gt;
    &lt;button ng-click='updateFactoryData(data)'&gt;&lt;/button&gt;
  
    &lt;custom-dir&gt;Custom directive with ctrlB&lt;/custom-dir&gt;
    &lt;custom-dir&gt;Custom directive with ctrlB&lt;/custom-dir&gt;
    &lt;custom-dir&gt;Custom directive with ctrlB&lt;/custom-dir&gt;
    ...
    &lt;other-custom-dir&gt;Custom directive with ctrlC&lt;/other-custom-dir&gt;
    &lt;other-custom-dir&gt;Custom directive with ctrlC&lt;/other-custom-dir&gt;
    &lt;other-custom-dir&gt;Custom directive with ctrlC&lt;/other-custom-dir&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a dataFactory, which when user clicks the button, the updated data will store in dataFactory, the dataFactory is injected to both ctrlB and ctrlC.</p>
  
  <p>The problem is, when data is updated after clicking the button, the changes do not reflect on both custom-dir and other-custom-dir, is there any way ctrlB and ctrlC's scope value automatically reflect the changes made in scope under ctrlA?</p>
  
  <p>Thanks very much for the help!</p>
  
  <p>Thanks all for the kind help!! I finally figure out why the change cannot be reflected, I watch the object parameter to see if there are changes, but watch only monitor the object reference instead of the actual content, after deep watching the object parameter, I can finally get the watch work! Thanks for all the help</p>
  
  <pre><code>&lt;custom-dir para="{data: data}"&gt;&lt;/custom-dir&gt;
  </code></pre>
  
  <p>Then in directive's link function</p>
  
  <pre><code>scope.$watch('para.data', function(n,o){
                  alert('changed')
              }, true); //&gt;&gt; The true is important!!
  </code></pre>