JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="Ctrl">
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
    <hr/>
    [ <a href="" ng-click="predicate=''">unsorted</a> ]
    <table class="friend">
        <tr>
            <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
                (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)
            </th>
            <th><a href="" ng-click="predicate = 'count_loose'; reverse=!reverse">count_loose</a></th>
            <th><a href="" ng-click="predicate = 'goal_average'; reverse=!reverse">goal_average</a></th>
        </tr>
        <tr ng-repeat="team in teams | orderBy:predicate:reverse">
            <td>{{team.name}}</td>
            <td>{{team.count_loose}}</td>
            <td>{{team.goal_average}}</td>
        </tr>
    </table>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {

    $scope.teams = [
        {
            id: 100,
            name: "A Team",
            count_win: 1,
            count_loose: 2,
            goal_average: 1
        },
        {
            id: 200,
            name: "C Team",
            count_win: 2,
            count_loose: 3,
            goal_average: 4
        },
        {
            id: 300,
            name: "B Team",
            count_win: 4,
            count_loose: 1,
            goal_average: 8
        }
    ];
    $scope.predicate = 'name';
});