Nested ng-repeat in angularJS doesn't work

Question

I am a student and learning angularJS for my project. Please bear with me for any silly questions.

I am trying to iterate through an array of challenges using ng-repeat[myChallenge in ListChallengesICreated.challenges]. In the mean time, each challenges, I am trying to call another function to pass an array of badge id, which return an array of badges URL's belongs to a that specific challenge.I also need to iterate through that badges URL's using ng-repeat[badge in filtered_badges] as well to display badges along each challenges.

But second ng-repeat only run after first ng-repeat is completed. So all the challenges display same badges pictures instead of it respective badges. Is there a way to run second ng-repeat concurrently while first being executed?

HTML code:

<table class="table table-condensed" style="border-style:solid; border-color:blue;width:100%" ng-init="list_challenges_I_created();">
    <tr **ng-repeat="myChallenge in ListChallengesICreated.challenges" ** ng-init="get_badge(myChallenge.unlockRequiredBadges)">
        <td class="cMName">{{myChallenge.name}}</td>
        <td class="cMLocation" **ng-repeat="badge in filtered_badges" **>
            <input type="image" ng-src="{{badge.imageURL}}" />
        </td>
        <td class="cMSDate">{{myChallenge.startDate}}</td>
        <td class="cMEDate">{{myChallenge.endDate}}</td>
        <td class="cMReview">
            <div class="btn-group">
                <button class="btn btn-warning" a data-target="#statsModal" role="button" data-toggle="modal">Stats</button>
                <button class="btn btn-danger" a data-target="#tab2create">Edit</button>
            </div>
        </td>
        <td class="cMPublish">nmfv</td>
        <td class="cMShare">nmfnvm</td>
    </tr>
</table>

JS File (which returns badges)

$scope.get_badge = function (allRequiredBadges) {
    var path_badges = [];
    var get_all_badges = {};
    var all_badges = {};
    var all_badges_URL = [];
    $scope.filtered_badges = {};
    path_badges = allRequiredBadges;

    get_all_badges = $resource('/jsonapi/all_badges');
    get_all_badges.get({}, function (response) {
        all_badges = response;

        for (var j = 0; j < path_badges.length; j++) {
            for (var i = 0; i < all_badges.badges.length; i++) {
                if (all_badges.badges[i].id == path_badges[j]) {
                    all_badges_URL.push(all_badges.badges[i]);
                }
            }
        }
        $scope.filtered_badges = all_badges_URL;
    })
}

Answer 1

Actually the problem is not in ng-repeat directive but in incorrect scope usage. I think your $scope.get_badge function is defined in the controller and $scope used there is the controller's scope. So when get_badge called for 2 challenges then this line:

$scope.filtered_badges = all_badges_URL;

overwrites the previouly loaded badges, that's why you get the same badges for all challenges. The simplest solution is to but badges collection inside challenge object, like this:

In javascript:

myChallenge.filtered_badges = ...

In html:

<tr ng-repeat="myChallenge in ListChallengesICreated.challenges" ng-init="get_badge(myChallenge)">
   <td class="cMLocation" ng-repeat="badge in myChallenge.filtered_badges" >
       <input type="image" ng-src="{{badge.imageURL}}" />
   </td>