title: Different controllers in different files for ng-view
body: <p>I am using two controllers(In diffrent js files) for different views.</p>
  
  <p>My main HTML</p>
  
  <p>================================================================================</p>
  
  <pre><code>&lt;html ng-app="MyApp"&gt;
  
  &lt;head&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/JS/utilityJS/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/JS/utilityJS/angular-route.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="/JS/app.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="/JS/controllerLocation.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="/JS/controllerItem.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="populateDiv" &gt;
           &lt;div id="header"   ng-include src="'/pages/header.html'"&gt;&lt;/div&gt; 
          &lt;div id="footer" ng-include src="'/pages/footer.html'"&gt;&lt;/div&gt;
          &lt;div id="groceryBg" class=" mainContentBg" style=""&gt; &lt;/div&gt;
          &lt;div ng-view=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>App.js // main js file</h1>
  
  <pre><code> angular.module('controllersModule', []);
      var AppModule = angular.module('MyApp', ['ngRoute','controllersModule']);
  
      AppModule 
      .service('locationService', function ($http) {
      ......  
      }
  
      AppModule .config(['$routeProvider',
        function($routeProvider) {
  
  
          $routeProvider.
            when('/Load/', {
              templateUrl: 'location.html',
              controller: 'locationCtrl'
            }).
            when('/Items/', {
              templateUrl: 'items.html',
              controller: 'itemsCtrl'
            }).
            otherwise({
              redirectTo: '/Load/'
            });
        }]);
  </code></pre>
  
  <h1>controllerLocation.js // location controller</h1>
  
  <pre><code> angular.module('controllersModule').controller('locationCtrl', ['$rootScope', '$scope','$route', '$http','$location','locationService', '$routeParams',
          function($rootScope, $scope, $route,$http,$location,locationService, $routeParams)
          {
  
      $location.path("/Items");
      }
  </code></pre>
  
  <h1>controllerItem.js   // Item controller</h1>
  
  <pre><code> angular.module('controllersModule').controller('itemsCtrl' ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
          function($rootScope, $scope, $route, $http, locationService, $routeParams)
          {
  
  
              console.log("Scope id Items is:- " + $scope.$id);
  
      }
  </code></pre>
  
  <h1>location.html   // Location html</h1>
  
  <pre><code> &lt;html&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
       &lt;div&gt; 
      Location.....
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <h1>items.html</h1>
  
  <pre><code> &lt;html&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
       &lt;div&gt; 
      Items.....
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>================================================================================</p>
  
  <p>When I am calling /Load and debugging its showing the location.html content and loading controllerLocation as well. But after $location.path("/Items"); its loading items.html but not loading controllerItem and throwing erro<code>enter code here</code>r <a href="http://errors.angularjs.org/1.2.22/ng/areq?p0=itemsCtrl&amp;p1=not%20aNaNunction%2C%20got%20undefined" rel="nofollow">http://errors.angularjs.org/1.2.22/ng/areq?p0=itemsCtrl&amp;p1=not%20aNaNunction%2C%20got%20undefined</a>.</p>
  
  <p>Can you please help in finding what is the problem?</p>