Dynamically loading Views and Controllers in AngularJS

If you are creating AngularJs app first time then follow simple steps.
1. Create one index.JSP file where you should run your app using ng-app directive and add all scripts and files.
2. create one Js file app.js.
add all module name in app.js and run your js using .run method.
3. maintain services, controllers and filters, directives, templates seperately in different folders and in different files.
And dont forget to add module name in app.js and add path in index.jsp
4. In your services files write only sharing business logic.
All other business logic related to particular file write it in controller.
Here your are maintaining ajax calls so dont meshup it with controllers.

.Service

.factory('angularService', function () {
  return {
    // Write business logic
  }
})

5. Declare $starteProvider and define .states in your controller.

For ex.

$stateProvider.state('xyz_state', function () {
   // add url,
   // templateUrl,
   // controller
})
.controller('myFirstController', function () {
   // Add your business logic
   // scope variables
});  

6. Maintain view pages separately.
7. Maintain Directives and Filters separately.

I usually use the $templateCache & store all my views there. if your on Node environment i'd suggest add ng-html2js to your build process.

as for controllers & other JS you should minify and concat all and load just that file in the beginning.