AngularJS：如何根据fieldValue索引动态显示对应colName值？

有两个长度相等但长度未知的JavaScript数组，长度由数据库值决定，示例如下：

colName=['col1','col2','col3'];
fieldValue=['abc','def','ghi'];

或

colName=['col1','col2','col3', 'col4'];
fieldValue=['abc','def','ghi', 'lmn'];

两个数组满足colName.length = x，fieldValue.length = x（x为变量）。

需要在HTML中使用AngularJS，遍历fieldValue时，根据当前位置显示对应索引的colName值。尝试的代码如下：

<tr ng-repeat="fieldValue in form.fieldValue track by $index">
    <td> {{colName[{{$index}}]}}</td>
    <td> {{fieldValue}} </td> 
</tr>

其中<td> {{colName[{{$index}}]}}</td>这段代码执行失败，请问该如何根据当前fieldValue的位置，正确显示对应的colName[x]值？

预期效果（colX的数量随数组长度动态变化）：
col1 abc

col2 def

col3 ghi

问题出在AngularJS表达式里嵌套了双大括号{{}}——AngularJS的模板表达式本身已经在{{}}内部，不需要再额外包裹一层大括号。直接使用$index作为数组下标即可，修改后的代码如下：

<tr ng-repeat="fieldValue in form.fieldValue track by $index">
    <td> {{colName[$index]}}</td>
    <td> {{fieldValue}} </td> 
</tr>

另外需要注意，确保colName是当前AngularJS作用域中可访问的变量，否则模板无法读取到数组内容。

内容的提问来源于stack exchange，提问作者user1169587