AngularJSでのコントローラー、サービス定義のファイル分割について

お世話になります。

AngularJSにて開発中ですが、サンプルなどにあるようなapp.jsファイル単体に
controllerやservice,directiveを全て記述するのは可読性も悪く問題だと思ったため
各種サイトを参考にディレクトリを切り、機能ごとにファイルに書き出しました。

が、肝心のmodule読み込み方法がうまくいかないです。
下記に簡単にですがやりたいことのサンプルを載せます。

// index.html (スクリプト読み込み部のみ)
<script src="js/controllers/main.controller.js"></script>
<script src="js/controllers/page1.controller.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>

// app.js
(function(){
  'use strict';
  angular.module('myApp', ['controllers']);
})();

// controller.js
(function(){
  'use strict';
  angular.module('controllers', [
    'controllers.main',
    'controllers.page1',
  ]);
})();

// main.controller.js
(function(){
  'use strict';
  angular.module('controllers.main', [])
  .controller('mainController', ['$scope', function($scope){...}]
  );
})();

// page1.controller.js
(function(){
  'use strict';
  angular.module('controllers.page1', [])
  .controller('page1Controller', ['$scope', function($scope){...}]
  );
})();

このようなイメージです。
要は、controllersにcontrollers.main, controllers.page1として、増える毎に追加していき、controllers.jsファイル内で「controllers」moduleとして一括で登録したいのです。
serviceも同様に複数ファイルにまたがり作成したserviceファイルを一括にまとめて宣言したいです。

・書き方が間違っている
・根本を理解してない

などの指摘でも結構ですのでアドバイスいただけると助かります。
よろしくお願いします。