Angular js not finding controller?

Question

I am using angular js, I wrote the code in two different jsp files. Featuring two different views. if I create a separate view, it works fine.but, if I render both views on the same page, I got this error

Error: Argument 'UserCtrl' is not a function, got undefined

The js code snippet in jsp is as follows.

in my first jsp file there is

 // Bootstrap the Application var App = angular.module('module', []); // Set up a controller and define a model App.controller('UserCtrl', function($scope) { $scope.user = {}; jQuery.get("<c:url value='${someUrl}'/>", function(data) { angular.element('#user_detail').scope().user = data; angular.element('#user_detail').scope().$apply(); }, "json"); }); 

and in the second -

 // Bootstrap the Application var App = angular.module('module', []); // Set up a controller and define a model App.controller('ProfileCtrl', function($scope) { $scope.profile = {}; jQuery.get("<c:url value='${someUrl}'/>", function(data) { angular.element('#profile').scope().profile = data; angular.element('#profile').scope().$apply(); }, "json"); }); 

I tried to give different names to the modules, but that didn't work for me either. Any help is appreciated. thanks!

Answer 1

it worked. This is due to the ng-app variable, I bound it on both jsp pages. Now I attached it to the main body cover for both jsp.

Answer 2

I think you are reinitializing the pls application variable, try under code

  var App = App ||angular.module('module', []); 

working fiddle http://jsfiddle.net/e6A5q/