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

enter image description here

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:

enter image description here

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>

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>

If you can change the json-structure, then it's more logical to have it on object form:

plans: [{
    id: 1098565,
    name: 'plan_abc'
},...]

If you can't change the json, and the two arrays always have the same length:

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

$index is a magic value that comes from the ng-repeat directive. As you probably can guess, it keeps track of the where you are in the repeater.