AngularJS home page performance concern - angularjs

Question

I am new to AngularJS and am trying to build an Mobile Web application. As I started writing controllers, services and routes for various functionalities the index.html JS and CSS include seems to be growing day by day. For example, When I start writing controller, services for any functionality then am forced to include them in index.html. I am thinking there is a fundamental problem with the coding approach. If my home page route is "/home" or "/" then home.html should download only JS and CSS files related to home page. But home.html(view) seems to download the entire Javascript and CSS library for every page. How should I design my app in such a way only the functionality related controller, services, directives Javascript files should be downloaded for a page. I appreciate if anyone can explain with a simple example.
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common/icomoon.css">
<link rel="stylesheet" type="text/css" href="css/lib/angular/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<link rel="stylesheet" type="text/css" href="css/pdp.css">
<link rel="stylesheet" type="text/css" href="css/pdp_751_1.css">
<script src="js/lib/jquery-1.7.1.min.js"></script>
<script src="js/lib/jquery.cycle.all.js"></script>
<script src="js/lib/jquery.touchwipe.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<!-- This is the route provider for the main app... -->
<script src="js/app.js"></script>
<script src="js/controllers/c-home.js"></script>
<script src="js/controllers/c-browse.js"></script>
<script src="js/controllers/c-product-details.js"></script>
<!--<script src="js/directives/directives.js"></script>-->
<script src="js/directives/d-product-details.js"></script>
<script src="js/services/s-home.js"></script>
<script src="js/services/s-browse.js"></script>
<script src="js/services/s-product-details.js"></script>
<script src="js/lib/angular/angular-resource.min.js"></script>
<script src="js/lib/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="js/lib/iscroll.js"></script>

Answer 1

You should not worry so much about the combined payload size of your files, but more about the build process and making sure to reduce HTTP requests as much as possible (1 css, 1 js is all you should have in your home.html). This is more important. Also minify everything. I suggest you check out ng-boilerplate. Its a starting point for angular apps and has most of the best practices you should be employing.
https://github.com/joshdmiller/ng-boilerplate
Make sure to read all the readme files at the various directory levels.