Двусторонняя сортировка в Angular Js

У меня есть показанная таблица с заполненными полями. Я хочу сделать двухстороннее расположение столбцов. Но работает только односторонний.

Я попытался нарезать его, чтобы добавить возможность замены - и добавить +, чтобы изменить порядок.

html файл.

// For Product Table.
<table border = "1">
    <thead>
        <tr>
            <th ng-click = "customOrderBy('id')">Id</th>
            <th ng-click = "customOrderBy('name')">Name</th>
            <th ng-click = "customOrderBy('age')">Age</th>
            <th ng-click = "customOrderBy('school')">School</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr .....>
            <td>.....</td>
            <td>.....</td>
            <td>.....</td>
            <td>.....</td>
            <td>
                <!--Old Action Buttons  
                        <button .....>....</button>-->
                <button .....>.....</button>

                <!--Old Action Buttons  
                        <button .....>.....</button>-->
                <button .....>.....</button>
            </td>
        </tr>
    </tbody>
</table>

Функция файла app.js.

// Double Sided Sorting.
$scope.customOrderBy = function (columnName) {
    // var currentColumnName = $scope.myOrderBy.slice(1);
    // var currentDirection = $scope.myOrderBy.slice(0, 1);
    // var direction = '-';
    // if (columnName === currentColumnName) {
    //     direction = (currentDirection == '+' ? '-' : '+');
    // }
    // $scope.myOrderBy = direction + columnName;

    $scope.myOrderBy = columnName;
}

Когда я нажимаю на заголовок, направление заказа должно измениться.