AngularJS 以某种方式一键对两个表进行排序

我在一个有角度的页面上有两个表格，两个表格都有可点击的标题进行排序。不知何故，单击任一表中的标题会对两个表进行排序，即使它们具有不同的列名和不同的"orderByField"变量。

第一张表：

<table class="table table-striped table-bordered table-hover" style="width: 100%;">
    <thead>
        <tr>
            <th class="clickable colored_text span7 textLeft" ng-click="flagOrderByField='FlagName'; reverseSort = !reverseSort">Flag Name</th>
            <th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='DateAdded'; reverseSort = !reverseSort">Date Added</th>
            <th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='Expires'; reverseSort = !reverseSort">Expires</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="flag in FlagList | orderBy:flagOrderByField:reverseSort" style="border-top: 1px dashed rgb(200, 200, 200);">
            <td ng-class="flag.SystemFlag ? 'text-error' : 'text-success'">{{::flag.FlagName}}</td>
            <td>{{::flag.DateAdded | date:'MM/dd/yyyy' }}</td>
            <td>{{::flag.Expires | date:'MM/dd/yyyy' }}</td>
        </tr>
    </tbody>
</table>

第二张表：

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="clickable colored_text" ng-click="orderByField='CourseNumber'; reverseSort = !reverseSort">Course #</th>
            <th class="clickable colored_text" ng-click="orderByField='ClassName'; reverseSort = !reverseSort">Course Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="class in classes | orderBy:orderByField:reverseSort | startAt:(currentPage-1)*pageSize | limitTo:pageSize">
            <td>{{::class.CourseNumber }}</td>
            <td>{{::class.ClassName }}</td>
        </tr>
    </tbody>
</table>

如何让这两个表分别排序？（此页面还有一堆其他表，在单击选项卡时加载的选项卡中，它们都具有相同的奇怪行为。