title: AngularJS nested views & controllers
body: <p>Below is my application layout:</p>
  
  <p><img src="https://i.stack.imgur.com/NotpE.png" alt="enter image description here"></p>
  
  <p><strong>app.html</strong> code is below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="MyApp"&gt;
  &lt;head&gt;
      &lt;title&gt;My AngularJS App&lt;/title&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="/static/app/controllers.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#admin"&gt;Admin&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#sales"&gt;Sales&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#purchase"&gt;Purchase&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div ng-controller="AppCtrl" ng-include="view.url"&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>/static/app/controllers.js</strong> is:</p>
  
  <pre><code>var app = angular.module('MyApp', []);
  
  app.controller('AppCtrl', ['$scope', '$location',
      function ($scope, $location) {
  
          $scope.$watch(
              function () {
                  return $location.path();
              },
              function (path) {
                  var moduleName = path.split("/")[1];
                  if (moduleName) {
                      $scope.view = { url: "/static/app/" + moduleName + "/" + moduleName + ".html" };
                  }
              });
  
      } ]);
  </code></pre>
  
  <p>Now let say <strong>admin.html</strong> is:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;Admin&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and sales.html, and purchase.html are just about the same. Then my app's navigation works just as expected; when admin link is clicked, admin.html is loaded and shown.
  But if <strong>admin.html</strong> is as follows:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;Admin&lt;/p&gt;
      &lt;script src="/static/app/admin/controllers.js"&gt;&lt;/script&gt;
      &lt;div ng-controller="AdminCtrl" ng-include="subView.url"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <strong>/app/admin/controllers.js</strong> is</p>
  
  <pre><code>var admin = angular.module('MyApp.Admin', []);
  
  admin.controller('AdminCtrl', ['$scope', '$location',
      function ($scope, $location) {
  
  
      } ]);
  </code></pre>
  
  <p>then when admin link is clicked, the following error is thrown in Google Chrome console:</p>
  
  <pre><code>Error: Argument 'AdminCtrl' is not a function, got undefined
      at Error (&lt;anonymous&gt;)
  </code></pre>
  
  <p>If I move AdminCtrl to /app/controllers.js, then it works; but I would prefer it to be in its own directory. Can someone help me with this? Also, next step is to display "subView", similar way as "view" is navigated. Any hint on this will be much appreciated.</p>