AngularJS including partial js files without loading in HTML head

I have file and file which has a controller. I am injecting this controller into my app in . So I don't want to load file in my index.html head. Because if I have many js files, I would have to load them in my head tag. So this seems dirty to me. Why do I have to load my every extra js files, I am already injecting them in ? Or is there any better way to do this?

index.html

<!DOCTYPE html>
<html ng-app="watch">
    <head>   
        <title>Angular Watch</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src=""></script>
        <script type="text/javascript" src=""></script>
        <script type="text/javascript" src=""></script>
        <script type="text/javascript" src=""></script>
    </head>
    <body ng-controller="watchExample">
        <div ng-view=""></div>        
    </body>
</html>

var app = angular.module("watch", ['ngRoute', 'watch-page']);

app.config(function($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl: 'login.html' 
        })
        .when('/watch',{
            resolve: {
                "check": function($location,$rootScope){
                    if(!$rootScope.loggedIn){
                        $location.path('/');
                    }
                }
            },
            templateUrl: 'watch.html',
            controller: 'watchExample'
        })
        .otherwise({
            redirectTo: '/' 
        });    
});

var app = angular.module("watch-page", []);
app.controller('watchExample', ['$scope', function ($scope) {
        $scope.counter = -1;
        $scope.$watch('myText', function (newValue, oldValue) {
            $scope.counter++;
            if($scope.counter === 50){
                alert("Yeter artık "+$scope.counter+" kere değiştirdin!");                
            }
            $scope.oldVal = oldValue;
            $scope.newVal = newValue;
        });
    }]);


ANSWERS:


See in lame language just to make you understand.

Suppose there is a grocery shop, when you go there, what would you find? almost all the groceries right? and now you want some vegitables, so will you take them all? ofcourse no you will just get it what you want.

when you give src="" then the whole js file "REMEBER JS FILE AND ITS SOURCE CODE" loaded into your html app, now you want something from inside it. for example some function(), what you will call function_name() or src=""..

so src just load all the data in page and injection is just use to get the functions from the file.


for you another question "BETTER WAY TO DO" is to use gulp.

what gulp do is to combile all the js file into one (it is one of the features )



 MORE:


 ? Error in routing in angular1
 ? AngularJS routing issue: Home page is not displayed
 ? angularjs 1.3.16 routing with html5mode, url is updating but content not updating
 ? Crash when use ngRoute angular
 ? ngRoute dynamic url as first part of path
 ? reload page in angular js after logout
 ? Angular js - check if current url matches the route (with dynamic url params)
 ? angular-rails-templates: templates are not found
 ? Error: No module: ngRoute when trying to implement routing in angularjs
 ? angular2 - Pass value from parent route to child route