title: Dynamically Loading Controllers and ng-include
body: <p>At the moment I have an app that has a sidebar, and the sidebar loads different html templates using <code>ng-include</code> based on what operation the user chooses to do. It's a map related app, so for example, if the user selects the 'Add Leg' button it will load the <code>add_leg.html</code> template into the sidebar using <code>ng-include</code>:</p>
  
  <pre><code>// The Javascript code:
  $scope.addLeg = function() {
      $scope.sidebar = true;
      $scope.sidebar_template = '/partials/legs/add_leg.html';    
  }
  
  // Simplified example of HTML:
  &lt;html&gt;
  &lt;div ng-app="MyApp" ng-controller="MainCtrl"&gt;
      &lt;a ng-click="addLeg()"&gt;Add Leg&lt;/a&gt;
      &lt;a ng-click="addRoute()"&gt;Add Route&lt;/a&gt;
      &lt;a ng-click="editLeg()"&gt;Edit Leg&lt;/a&gt;
      &lt;a ng-click="editRoute()"&gt;Edit Route&lt;/a&gt;
      ...
  
      &lt;div id="sidebar" ng-class="{'sidebar-hidden': sidebar == false}"&gt;
          &lt;div ng-include src="sidebar_template"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;google-map&gt;&lt;/google-map&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is all well and good and works as desired, but at the moment my app is only using one controller (<code>MainCtrl</code> in <code>js/controllers.js</code>) and it's starting to get really cluttered. I've got a lot of methods now because the apps functionality is expanding. I'd like to split my controller up into multiple controllers whilst retaining this sidebar functionality.</p>
  
  <p>I want to have <code>MainCtrl</code> as the main controller that controls the loading of the sidebar template (by changing the <code>sidebar_template</code> variable that points to the file destination), and I want it to control some of the global map related methods (like fetching suburb names from coordinates, etc).</p>
  
  <p>I've tried to split it like so:</p>
  
  <pre><code>controllers/js/main.js - MainCtrl
  controllers/js/legs.js - LegCtrl
  controllers/js/routes.js - RouteCtrl
  </code></pre>
  
  <p>I want the <code>LegCtrl</code> and <code>RouteCtrl</code> to inherit the <code>MainCtrl</code> so I can access its scope and methods, that's all fine. But now the problem is how do I dynamically load the controller onto the sidebar div based on what functionality is required. Originally all of my methods were in <code>MainCtrl</code>, and that's on the wrapper div that surrounds the sidebar div (see above again for an example), so it wasn't a problem.</p>
  
  <p>For example, say I press the 'Add Leg' button, it's going to need to call <code>addLeg</code> in <code>LegCtrl</code>, but <code>LegCtrl</code> isn't loaded on the app, so it doesn't have access to the method. I could keep <code>addLeg()</code> inside the <code>MainCtrl</code>, and have it change the <code>sidebar_template</code> variable to load the template, but nothing in the template will work because it is calling methods from inside the <code>LegCtrl</code> now.</p>
  
  <p>I need to somehow dynamically load the controller on the sidebar's <code>ng-include</code> div, something like this perhaps:</p>
  
  <pre><code>// MainCtrl
  $scope.addLeg = function() {
      $scope.required_controller = LegCtrl;
  
      $scope.sidebar = true;
      $scope.sidebar_template = '/partials/legs/add_leg.html';    
  
      LegCtrl.addLeg();
  }
  
  &lt;div id="sidebar" ng-class="{'sidebar-hidden': sidebar == false}"&gt;
      &lt;div ng-include src="sidebar_template" ng-controller="{{required_controller}}"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the non-working example above you can see a possible solution I've thought of, but I need <code>LegCtrl</code>to be the actual controller function, not an object (for <code>ng-controller</code> to work). I also need some way to call <code>addLeg</code> on the <code>LegCtrl</code> from the <code>MainCtrl.addLeg</code> (perhaps using broadcast?).</p>
  
  <p>If anyone can point me in the right direction that'd be great. Sorry for the huge post, it needed a bit of explaining to make it coherent. Hopefully it makes sense. Thanks.</p>
  
  <p><strong>Update:</strong> I think I've found a solution using a service to act as the navigation control (it will load the relevant templates and broadcast an event to the new controller being dynamically loaded to tell it what function to execute): </p>
  
  <p><a href="http://plnkr.co/edit/Tjyn1OiVvToNntPBoH58?p=preview">http://plnkr.co/edit/Tjyn1OiVvToNntPBoH58?p=preview</a></p>
  
  <p>Just trying to test this idea out now, but the broadcast <code>.on</code> doesn't work. I think it's because the broadcast fires before the template loads. How can I fix this? Is this a good solution for what I'm doing?</p>