title: AngularJS : Sharing a controller scope between two directives with isolate scopes
body: <p>I have two directives that provide different views on the same set of data. Both of these directives need to rely on central functionality contained in a controller. The controller uses various services to load items, perform searches, etc for the grid or feed views.</p>
  
  <p>I would like to share the single controller between the two directives. I realize that I can do this by specifying the controller at a level in the dom above the two directives using ng-controller. However, I cannot get this to work, as both of the directives require a configuration object being passed into them (preferably through an isolate scope) which is used by the central controller.</p>
  
  <p>I cannot simply specify the controller within each directive because angularjs controllers are not singletons. By doing this, there would be two instances of the controller and therefore two sets of data, watches, etc.</p>
  
  <p>Below is an example situation.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- myConfigObject comes from a scope above ListingController --&gt;
  &lt;div data-ng-controller="ListingController"&gt;
      &lt;div data-dir1 data-config="myConfigObject"&gt;&lt;/div&gt;
      &lt;div data-dir2 data-config="myConfigObject"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>.controller('ListingController',
      function ($scope) {
          //Try to use $scope.config here and get errors because it's being passed in on 
          //children dom elements
  
          //These items need to be used in the templates provided in the directives sharing
          //this controller
          $scope.items = [
              {name:'test1'},
              {name:'test2'}
          ];
      }
  );
  </code></pre>
  
  <p>Directives:</p>
  
  <pre><code>.directive('dir1',
      function() {
          return {
              templateUrl: 'someTemplateThatUsesStuffOnControllerScope.html',
              scope: {
                  config: '='
              }
          }
      }
  )
  .directive('dir2',
      function() {
          return {
              templateUrl: 'someOtherTemplateThatUsesStuffOnControllerScope.html',
              scope: {
                  config: '='
              }
          }
      }
  )
  </code></pre>
  
  <p>someTemplateThatUsesStuffOnControllerScope.html</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li data-ng-repeat="item in items"&gt;{{item.name}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Finally, I'm wanting to use isolate scopes so as to protect other parent scopes from having a possible "$scope.config" overridden by the directives'</p>
  
  <p>Hopefully that all makes sense to someone and hopefully there is an answer out there.</p>