title: Multiple controllers working within ngRoute example
body: <p>I have a small ngRoute example I am trying that to use multiple applications and controllers with.  The first app/controller is for the main page, while the second set of app/controller is for the html that ngRoute loads up after pressing a button.  However, it doesn't seem to be working.  Code below:</p>
  
  <p><strong>Main Module</strong></p>
  
  <p><code>var app = angular.module("MainModule", ["ngRoute"]);</code></p>
  
  <p><strong>Main Controller</strong></p>
  
  <pre><code>app.controller("MainController", function ($scope) {
  
  });
  
  app.config(function ($routeProvider) {
      $routeProvider
          .when('/customers', {
              templateUrl: "customers.html",
              controller: "CustomerController"
      })
  });
  </code></pre>
  
  <p><strong>Customer Module</strong></p>
  
  <pre><code>var CustomerModule = angular.module("CustomerModule", []);
  </code></pre>
  
  <p><strong>Customer Controller</strong></p>
  
  <pre><code>CustomerModule.controller("CustomerController", function ($scope) {
  
  $scope.Test = "Hey";
  
  $scope.CustomerArray = [
      { "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman"     },
      { "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
      ]   
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/MainModule.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/MainController.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="MyCSS.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div ng-app="MainModule"&gt;
          &lt;div id="TopDiv"&gt;Main Module&lt;/div&gt;
          &lt;a href="#/customers"&gt;&lt;input type="button" value="Load Customers" /&gt; &lt;/a&gt;
  
          &lt;div ng-view&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>customers.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="scripts/CustomerModule.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/CustomerController.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app="CustomerModule" ng-controller="CustomerController"&gt;
          {{Test}}
  
              &lt;ul&gt;
                  &lt;li ng-repeat="x in CustomerArray"&gt;{{x.firstName x.lastName x.Occupation}}&lt;/li&gt;
              &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Long bits of code there, but hopefully simple code.  The output when I press the "Load Customer" button is literally {{Test}} with no array data to follow.</p>
  
  <p>I am just now learning angular, so any help with this issue I would appreciate.  I am just doing this for fun, to try to learn.  So I suppose the issue is not pressing. :) Thanks!</p>