javascript - angularsjs ng-repeatソートテーブルと未知の列数

Question

各列でテーブルを並べ替えようとしています。テーブルには、毎回異なる量の行と列があります。問題は述語にあります。繰り返される列はすべて「i」という名前で、個別に並べ替える必要があります。

HTML:

<table>
    <thead>
        <th><a href="" ng-click="predicate='value';reverse=!reverse">name</a></th>
        <th ng-repeat="header in headers"><a href="" ng-click="predicate='i';reverse=!reverse">{{header}}</a></th>
    </thead>
    <tbody>
        <tr ng-repeat="v in columns | orderBy:predicate:reverse">
            <td>{{v.value}}</td>
            <td ng-repeat="i in v.item">{{i}}</td>
        </tr>
    </tbody>
</table>

コントローラ：

function controller($scope) {
    $scope.headers = ["col1", "col2", "col3", "col4"];
    $scope.columns = [{value:'row1', item:['1','2','3','4']},
                      {value:'row2', item:['4','5','6','7']},
                      {value:'row3', item:['8','9','10','11']},
                      {value:'row4', item:['12','13','14','15']}];
    $scope.predicate = 'value';
}

ここにjsfiddleがあります。

返信ありがとうございます。