title: Decouple Angular modules
body: <p>I have a search web app made with AngularJS, which includes two angular modules: the <code>search-keyword-input</code> module and the <code>search-action</code> module.</p>
  
  <p>The first <code>search-keyword-input</code> module has suggest functionality, form validation functionality, and so on. The <code>search-action</code> module's functionality is requesting data and showing sortable results in a table. So each module has its own controller and directive.</p>
  
  <p>Here's the problem: the reason I modularize is, I want modules that could be reused and decoupled. But in this app, the keyword model value in the <code>search-keyword-input</code> module has to be passed into the search action module (the <code>search-action</code> module has to know what keyword to use to perform the search). So how can I pass the value between modules? How can they communicate without being coupled? </p>
  
  <p>I have figured out a way like adding a parent controller and global $scope value:</p>
  
  <pre><code>&lt;div ng-controller="globalController"&gt;
      &lt;div ng-controller="keywordController"&gt;&lt;/div&gt;
      &lt;div ng-controller="searchController"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the <code>search-keyword</code> module could set the keyword value on the <code>globalController</code>'s <code>$scope</code> and the <code>search-action</code> controller could also obtain that keyword value from the <code>globalController</code>. But I think this makes the modularization meaningless because they are coupled together. What else can I do?</p>