attach two ng-repeat themselves

Question

here is my isssue, i have two different loop, and each one of these loop are from different http request. Here a screen of what i've got :

And what i want, is that , bellow "claire pagniez" i want "1", bellow "Michel Polnaref" i want 3, bellow "mathilde zimmer" i want "1".

For now every integer are wrote repeatedly and i don't want that, i want them bellow the good element.

Here is my code:

in my view:

<ul ng-repeat="user in userbyorga track by $index">{{user.name}}<li ng-repeat="item in numtickets track by $index">{{item}}</li></ul>

in my controller:

here what i use to display my integer (number of ticket), i need 2 request to display one element:

 $scope.displayuser = function(id){
            var token = "xxxxxxx";
            userdisplay
                .send(token,id)
                .then(function(data){
                    console.log(data);
                    $scope.userbyorga = data.users;
                    console.log(data.users);
                    for(i = 0; i < data.users.length; i++){

                        var userid = data.users;


                       var userarray = JSON.stringify(userid);
                        localStorage.setItem("myid",userarray);
                    }
                })
                .then(function(){
                    var tabuser = JSON.parse(localStorage.getItem("myid"));
                    console.log(tabuser);
                    var urls = [];
                    $scope.numtickets = [];

                    for(i = 0; i < tabuser.length; i++){



                         urls.push({
                             url:JSON.stringify("https://cubber.zendesk.com/api/v2/users/"+tabuser[i].id+"/tickets/requested.json")

                         });


                        console.log(urls);

                        displayfilter
                            .user(token,tabuser[i].id)
                            .then(function(data){


                                $scope.numtickets.push(data.tickets.length);

                                console.log($scope.numtickets);





                            })
                    }

                })

        };

Ang the request i'm doing in my controller to display those name:

 $scope.displaycompany = function(){
            var token = "xxxxxxx";
            dropdown.send(token).then(function (data) {

                $scope.usertab = data.organizations;
                console.log($scope.usertab);


            });

        }

Answer 1

There is two way of doing this. First is server side : having one request returning the proper datasets.

I will focus on client side since's it's a client side question. I suggest you to create one list that wrapped the user and the value :

 var tabuser = JSON.parse(localStorage.getItem("myid"));
     console.log(tabuser);
     var urls = [];
     $scope.data = [];
     for(i = 0; i < tabuser.length; i++){
                  var currentUser = tabuser[i];// defining a variable in the scope of the callback function tabuser[i] just won't work as expected in the .then
                  displayfilter
                        .user(token,tabuser[i].id)
                        .then(function(data){
                            $scope.data.push({user:currentUser}, nbTickets:data.tickets.length});

                            console.log($scope.data);
                        })
                }

            })

Now you can just iterate on the whole thing :

<ul ng-repeat="wrapper in data track by $index">{{wrapper.user.name}}<li ng-repeat="item in wrapper.nbTickets track by $index">{{item}}</li></ul>

However i'm not sure if the 2nd ng-repeat is needed.

If this doesn't fit to your need check $q.all() documentation with that you can wait for a bunch of promise and get all the result together to merge them and reformat the data to fit to your needs.