using 2 controllers on a page with angularjs

Question

I'm trying to assign two controllers to a page but i'm finding hard to get through with 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 i get is only results for controller "useraccount_ctrl" works but userphotos_ctrl controller doesn't

This may be a copy/paste typo, but in the template the controller is "useraccount" and in the JS it's "useraccount_ctrl". — Erik, Jul 12 '16 at 12:04
Also (can be a typo as well), you have `ng-repeat="item in userphotos"` both in the first and second div, maybe you need `ng-repeat="item in useraccount"`? — rpadovani, Jul 12 '16 at 12:06
Maybe we could help better if you provide a jsfiddle : https://jsfiddle.net/ — Maxence, Jul 12 '16 at 12:09
You also need an element with `ui-view` if you want to use `ui.router` — Rhumborl, Jul 12 '16 at 12:10

score -1 · Answer 1 · edited May 23 '17 at 11:58

Using Angular UI Router allows you to only specify one controller in your state definition, which will be dynamically linked to your view. There are some options to work it around:

Using two directives (see this question).
Import your controller file manually with a static import. You will be able, from your page, to access every controller inside your file:

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

Problem is, using UI router you would want some more clarity in your view definitions, and not rely on static imports (which are messy when you try to build nice applications). That is why you should go for the first answer.

Please consider adding a comment when you downvote something (I would like to understand why). Thank you in advance — Yassine Badache, Jul 12 '16 at 14:31

using 2 controllers on a page with angularjs

1 Answers1