javascript - using 2 controllers on a page with angularjs -

i'm trying assign 2 controllers page i'm finding hard through angular js

html

    <div data-ng-controller="useraccount" ng-repeat="item in userphotos">           <ul id="navlist">             <li>               {{item.username}}             </li>           </ul>      </div>  <div data-ng-controller="userphotos_ctrl" ng-repeat="item in userphotos">       <ul id="navlist">         <li>           <img class="thumbnail" ng-src="http://localhost/myapp/resize_image/image.php?image={{item.pic}}&new_width=400&new_height=400">         </li>       </ul>  </div> 

js

 .state('tabs.useraccount',{         url:'/useraccount',         views:{         'list-source':{         templateurl:  'templates/user/user_account.html',          controller: 'useraccount_ctrl'         }          }     }) 

controllers

.controller('useraccount_ctrl',['$scope','$http',function($scope,$http){ $http.get('http://localhost/app/templates/user/user_account.php').success(function(data){        $scope.useraccount=(data) ;        //console.log(json.stringify(data));    }); }])  .controller('userphotos_ctrl',['$scope','$http',function($scope,$http){ $http.get('http://localhost/app/templates/user/photos.php').success(function(data){        $scope.userphotos=(data) ;        console.log(json.stringify(data));    }); }]) 

the result results controller "useraccount_ctrl" works userphotos_ctrl controller doesn't

using angular ui router allows specify 1 controller in state definition, dynamically linked view. there options work around:

• using 2 directives (see this question).
• import controller file manually static import. able, page, access every controller inside file:

<script type="text/javascript" src="path/to/controller.js">

problem is, using ui router want more clarity in view definitions, , not rely on static imports (which messy when try build nice applications). why should go first answer.