Use ng-repeat for 2 arrays

Question

Here I got 2 arrays. The first array is the option content, while the second array is the option tag(ie A, B, C, D). How can I do the layout for the 'input type="radio"' while using ng-repeat?

Here, I'm trying to do "w in optionTag" first, so that I can have "A", "B", "C", "D" as tag. Then, I wanna output "OptionA" right after "A" and that radio button.

In the code below, it works. Though, the problem is, the radio button appear four times after the option tag. The option content (OptionA, OptionB, OptionC, OptionD) is now showing up. How to make the radio button appear only once, and make the option content show after the radio button? Thanks.

Another question. Sometimes, there could be just 2 options in the option array. How can I show option tag A and B only?

Angular JS code:

$scope.option=["OptionA","OptionB","OptionC","OptionD"]
$scope.optionTag=["A", "B", "C", "D"]

HTML code:

<ul ng-repeat="w in optionTag">
  <li>{{w}}
    <input type="radio" data-ng-value="o"  ng-repeat="o in option" ng-model="my.Choice"/>{{o}}
  </li>
</ul>

Answer 1

There needs to be a correlation between the two arrays. Assuming they are both ordered in the same way you could track the $index on the first ng-repeat and reference the current index when render the radio button.

<ul ng-repeat="w in optionTag track by $index">
    <li>{{w}}
        <input type="radio" ng-value="option[$index]" ng-model="my.Choice" />{{option[$index]}}
    </li>
</ul>

Do they have to be two separate arrays? I would structure would be better suited as an array of objects:

Structure

$scope.options = [
    {
        'option': 'OptionA',
        'optionTag': 'A'
    },
    {
        'option': 'OptionB',
        'optionTag': 'B'
    },
    {
        'option': 'OptionC',
        'optionTag': 'C'
    },
    {
        'option': 'OptionD',
        'optionTag': 'D'
    }
]

HTML

<ul ng-repeat="optionObject in options track by $index">
    <li>{{optionObject.optionTag}}
        <input type="radio" ng-value="optionObject.option" ng-model="my.Choice" />{{optionObject.option}}
    </li>
</ul>

Answer 2

You need to use an array of objects. Better code, easier to scale. Check link for example.

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

$scope.option=[{Option: "A", OptionTag: "OptionA"}, {Option: "B", OptionTag: "OptionB"}, {Option: "C", OptionTag: "OptionC"}, {Option: "D", OptionTag: "OptionD"}]; 

}

<ul ng-repeat="w in option">
 <li>{{w.Option}}
  <form >
      <div ng-repeat=" o in option">
<input type="radio" name="select" data-ng-value="{w.OptionTg}"/> {{o.OptionTag}}
      </div>
  </form >
 </li>

</ul>
</div>

jsfiddle code