How can I display values from 2 different arrays in single ng-repeat?

Issue

In the above picture it shows the currently displayed content. But I want to display plan names on the left of the ids, something like this:

plan_abc  109426  btn  btn
plan_def  109428  btn  btn
plan_ghi  109423  btn  btn

JSON format is as below:

Code used:

<ul class="ul-plan">
                            <li class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
                              {{item}}  

                          <a ng-click="select('one')" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
                                
                                <a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>

                            </li>

First try:

<li class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds" "name in plan.planNames">
         {{name}}  {{item}}  
 </li>

Solution

If you have two collections with the same size, lets say:

$scope.data = { planIds: [1, 2, 3, 4], planNames: ['a', 'b', 'c', 'd'] }

You can use $index:

<div ng-repeat="id in data.planIds">
    {{ id }} - {{ data.planNames[$index] }}
</div>

Answered By - Paulo Scardine