How do I add an icon within a td at the end of each row using ng-repeat?

Question

I have a 2-dimensional array. I am using it as a source to populate an html table using angularjs ng-repeat. I want to add an icon at the end of each row. It works on the first two rows, but then the next several rows contain only the icon.

<div ng-app="myApp" ng-controller="tblCtrl">
<table id="tableToFilter" class="w3-table-all w3-small w3-row" ng-cloak>
<tr class="w3-blue w3-mobile">
<th data-row="0" data-col="{{$index}}" ng-repeat="columns in header">{{columns}}</th>
<th></th>
</tr>
<tr class="w3-mobile" ng-show="{{$index > 0}}" ng-repeat="rows in table">
<td data-row="{{$parent.$index}}" data-col="{{$index}}" ng-repeat="columns in rows">{{ columns }}</td>
<td><i class="material-icons editIcon">edit</i></td>
</tr>
</table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('tblCtrl', function($scope) {
$scope.table = datags;
$scope.header = datags[0];
});
</script>

'datags' above is a 2-dimensional array in json.stringify format. It does not have key/value pairs. It is 94 rows and 9 columns. I am using css to prevent displaying columns 0,4,7,8 so that my table fits on my screen. (I'm sure there's a cleaner way to do this.)

<style>
td[data-col="0"], th[data-col="0"] {
display: none;
}
td[data-col="4"], th[data-col="4"] {
display: none;
}
td[data-col="7"], th[data-col="7"] {
display: none;
}
td[data-col="8"], th[data-col="8"] {
display: none;
}
</style>

screenshot of my table What am I doing wrong?

Answer 1

I did figure it out. I think ng-repeat was perceiving the blanks as duplicates. I added track by $index and now it works. <tr class="w3-mobile" ng-show="{{$index > 0}}" ng-repeat="rows in table track by $index"> <td data-row="{{$parent.$index}}" data-col="{{$index}}" ng-repeat="columns in rows track by $index">{{ columns }}</td> <td><i class="material-icons editIcon">edit</i></td> </tr>