Angular OrderBy by object property in sub array

Question

I have a table...

<table width="100%">
        <thead>
            <tr ng-repeat="row in data.Rows | limitTo:1">
                <th ng-repeat="col in row.Columns" ng-show="{{col.Visible}}" ng-click="updateSortOrder(col.HeaderText)">
                    <a href>{{ col.HeaderText }}</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in data.Rows | orderBy: ??? ">
                <td ng-repeat="col in row.Columns" ng-show="{{col.Visible}}">
                    {{ col.Value }}
                </td>
            </tr>
        </tbody>
    </table>

and I have a JSON file with the following data structure...

"Rows": [{
         "Columns": [{
             "HeaderText": "Policy Number",
             "Value": "A123456789",
             "Visible": true
         }, {
             "HeaderText": "VRM",
             "Value": "XX12XXX",
             "Visible": true
         }, {
             "HeaderText": "Event Date",
             "Value": "2014-12-08 08:39:38.000",
             "Visible": true
         }, {
             "HeaderText": "Road SL",
             "Value": 30,
             "Visible": true
         }, {
             "HeaderText": "Speed",
             "Value": 39,
             "Visible": true
         }]
     }

I would like to be able to sort the data in the table by the corresponding "Value" property when the "HeaderText" is clicked. So if the user clicked on "Policy Number" header on the table, the table will sort by the Column object with "Policy Number" in it's "HeaderText" property by the objects "Value" property. (hope that makes sense!?)

How can i go about doing this? I'm new to Angular, so please be gentle :)

EDIT:: Following the advice given in the first answer and it's not quite working.

My updated code as follows...

<div ng-controller="ReportsController">
<h1>{{ data.ReportTitle }}<small ng-show="predicate !== null">Ordered by: {{data.Rows[0].Columns[predicate].HeaderText }} {{reverse ? "desc" : "asc"}}</small></h1>
<div>{{ error }}</div>
<table width="100%">
    <thead>
        <tr ng-repeat="row in data.Rows | limitTo:1">
            <th ng-repeat="col in row.Columns" ng-show="{{col.Visible}}" ng-click="updateSortOrder($index)">
                <a href>{{ col.HeaderText }}</a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data.Rows | orderBy:[predicate]:reverse ">
            <td ng-repeat="col in row.Columns" ng-show="{{col.Visible}}">
                {{ col.Value }}
            </td>
        </tr>
    </tbody>
</table>

and my controller...

var ReportsController = function ($scope, $http, $routeParams) {

    $scope.data = {};

    var onDataRetreived = function (response) {
        $scope.data = response.data;
    }

    var onError = function (reason) {
        controller.error = "Could not fetch data.";
    }

    $http({
            method: 'GET',
            url: 'data/report.json'
        })
        .then(onDataRetreived, onError);

    $scope.predicate = 0;
    $scope.reverse = true;
    $scope.updateSortOrder = function (predicate) {
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.predicate = predicate;
    };        
};

angular.module('Portal').controller('ReportsController', ['$scope', '$http', '$routeParams', ReportsController]);

The sorting apears to change, but it's not sorting on the Value of column that i click on. Any ideas?

Answer 1

You can use a orderBy filter

Change the predicate on updateSortOrder:

$scope.predicate = 'age';
$scope.reverse = true;
$scope.updateSortOrder = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.predicate = predicate;
      };

And use the predicate on ng-repeat:

<tr ng-repeat="row in data.Rows | orderBy:predicate:reverse ">
   <td ng-repeat="col in row.Columns" ng-show="{{col.Visible}}">
                    {{ col.Value }}
   </td>
</tr>