lazy loading - AngularJs Set controller on Dom at Runtime -

i'm trying set controller on dom object @ runtime:

example code here: 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 1st controller!";         $scope.btn1 = "ctrl1 btn 1";         $scope.btn2 = "ctrl1 btn 2";     }      // reference div#ctrl1 , apply controller it.     return firstcontroller; });   /* controller 2 (second.js) */ define([], function () {      function secondcontroller($scope) {         $scope.message = "i'm 2nd controller!";         $scope.btn1 = "ctrl2 btn 1";         $scope.btn2 = "ctrl2 btn 2";     }       // reference div#ctrl2 , apply controller it.     return secondcontroller; }); 

<!-- expected output --> <div id="ctrl1" ng-controller='firstcontroller'>     <p>i'm 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 2nd controller!</p>     <a href="#/view1" class="btn">ctrl2 btn 1</a>     <a href="#/view2" class="btn">ctrl2 btn 2</a> </div> 

any suggestions on how work. i'm using https://github.com/matys84pl/angularjs-requirejs-lazy-controllers looks entire app gets controller based on route path. need break application sections each controlled different controllers.

i've read it's frowned upon mod dom in controller i'm looking best practice - maybe specify dom element in routes.js:

routeconfig.config('../partials/view1.html', 'controllers/first', '#somedomelementid') 

i don't think angularjs-requirejs-lazy-controllers set way.

thanks!