angularjs - AngularJsは実行時にDomにコントローラーを設定します

Question

実行時にdomオブジェクトにコントローラーを設定しようとしています:

サンプルコード: http://jsfiddle.net/2FL3z/3/

<div id="ctrl1">
    <p>{{message}}</p>
    <a href="#/view1" class="btn">{{btn1}}</a>
    <a href="#/view2" class="btn">{{btn2}}</a>
</div>

<div id="ctrl2">
    <p>{{message}}</p>
    <a href="#/view1" class="btn">{{btn1}}</a>
    <a href="#/view2" class="btn">{{btn2}}</a>
</div>

/* CONTROLLER 1 (first.js) */
define([], function () {

    function FirstController($scope) {
        $scope.message = "I'm the 1st controller!";
        $scope.btn1 = "Ctrl1 Btn 1";
        $scope.btn2 = "Ctrl1 Btn 2";
    }

    // Get a reference to div#ctrl1 and apply this controller to it.
    return FirstController;
});


/* CONTROLLER 2 (second.js) */
define([], function () {

    function SecondController($scope) {
        $scope.message = "I'm the 2nd controller!";
        $scope.btn1 = "Ctrl2 Btn 1";
        $scope.btn2 = "Ctrl2 Btn 2";
    }

     // Get a reference to div#ctrl2 and apply this controller to it.
    return SecondController;
});

<!-- Expected Output -->
<div id="ctrl1" ng-controller='FirstController'>
    <p>I'm the 1st controller!</p>
    <a href="#/view1" class="btn">Ctrl1 Btn 1</a>
    <a href="#/view2" class="btn">Ctrl1 Btn 2</a>
</div>

<!-- References $scope of ctrl2 -->
<div id="ctrl2" ng-controller='FirstController'>
    <p>I'm the 2nd controller!</p>
    <a href="#/view1" class="btn">Ctrl2 Btn 1</a>
    <a href="#/view2" class="btn">Ctrl2 Btn 2</a>
</div>

それを機能させる方法に関する提案。https://github.com/matys84pl/angularjs-requirejs-lazy-controllersを使用していますが、アプリ全体がルート パスに基づいてコントローラーを取得しているようです。アプリケーションを、それぞれが異なるコントローラーによって制御されるセクションに分割する必要があります。

コントローラーで dom を変更することは嫌われていると読んだので、ベスト プラクティスを探しています。routes.js で dom 要素を指定することもできます。

routeConfig.config('../partials/view1.html', 'controllers/first', '#someDomElementID')

angularjs-requirejs-lazy-controllers がそのように設定されているとは思いません。

ありがとう！