Cordova Hybrid App Design - Controllers

I am trying to develop an Application using Cordova framework. My application needs to have many controllers to work. So keeping all the Controllers in the same file will be Bulky as the Code size will increase. So maintainability of the code will be lost.

So for each Controller which Programming Design approach is suggested:

1. Having one main App.js file and writing all the Controllers inside it. And finally importing only App.js file in index.html file.

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

myApp.controller('ControllerA', ['$scope', function($scope) {

}]);

myApp.controller('ControllerB', ['$scope', function($scope) {

}]);

myApp.controller('ControllerC', ['$scope', function($scope) {

}]);

2. Having multiple js files for each controller and importing all in the main index.html file:

Main App.js file:

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

ControllerA.js file:

myApp.controller('ControllerA', ['$scope', function($scope) {

}]);

ControllerB.js file:

myApp.controller('ControllerB', ['$scope', function($scope) {

}]);

ControllerC.js file:

myApp.controller('ControllerC', ['$scope', function($scope) {

}]);