title: Using a child controller from another module
body: <p>I've defined a module and made it the main module for my app using the ng-app directive. I added two controllers to the main app using angular.module('myApp').controller(). One of those controllers has page wide scope whereas the other controller is a child controller.</p>
  
  <p>What I'm now trying to do is include a controller that belongs to another module (not the main myApp module), but I can't figure it out. I do not want to globally namespace controllers.</p>
  
  <p>Anyone know how to do this?</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" data-ng-app='myApp' data-ng-controller='myApp.mainController'&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Untitled&lt;/title&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(function() {
        var app, module;
  
        //create two modules, one of which will be used for the app base
        app = angular.module('myApp', []);
        module = angular.module('otherModule', []);
  
        //create main controller for main app
        app.controller('myApp.mainController', function($scope) {
          $scope.content = 'App main controller content';
        });
  
        //create child controller for main app
        app.controller('myApp.subController', function($scope) {
          $scope.content = 'App sub controller content';
        });
  
        //create a controller for the other module
        module.controller('othermodule.controller', function($scope) {
          $scope.content = 'Other module controller content';
        });
      });
  
  
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;!-- output content from main controller from main module: myApp --&gt;
    {{content}}
  
    &lt;!-- specify use of main module's child controller and output its content --&gt;
    &lt;div data-ng-controller='myApp.subController'&gt;
      {{content}}
    &lt;/div&gt;
  
    &lt;!-- NOT WORKING - ideally should output content from the other module's controller --&gt;
    &lt;div data-ng-controller='othermodule.controller'&gt;
      {{content}}
    &lt;/div&gt;
  
    &lt;!-- load angular library --&gt;
    &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This code outputs the following with a JavaScript error essentially saying that the othermodule.controller controller was not found.</p>
  
  <blockquote>
    <p>App main controller content</p>
    
    <p>App sub controller content</p>
    
    <p>{{content}}</p>
  </blockquote>
  
  <p>Exact Error:</p>
  
  <pre><code>&gt; Error: Argument 'othermodule.controller' is not a function, got
  &gt; undefined
  &gt; assertArg@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1005
  &gt; assertArgFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1016
  &gt; @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4740
  &gt; applyDirectivesToNode/nodeLinkFn/&lt;@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4322
  &gt; forEach@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:140
  &gt; nodeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4307
  &gt; compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953
  &gt; compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3956
  &gt; nodeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4338
  &gt; compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953
  &gt; publicLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3858
  &gt; bootstrap/&lt;/&lt;@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:964
  &gt; Scope.prototype.$eval@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:7993
  &gt; Scope.prototype.$apply@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:8073
  &gt; bootstrap/&lt;@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:962
  &gt; invoke@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:2843
  &gt; bootstrap@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:961
  &gt; angularInit@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:936
  &gt; @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:14729
  &gt; b.Callbacks/c@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
  &gt; b.Callbacks/p.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
  &gt; .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
  &gt; H@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
  &gt; 
  &gt; http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js
  &gt; Line 5687
  </code></pre>