Как создать умный заголовок таблицы AngularJS с помощью стрелок вверх / вниз для продвижения пользователей

Раньше я программировал в JQuery и теперь переключаюсь на AngularJS. В JQuery это подключаемый модуль базы данных для удобной сортировки таблицы. В AngularJS я нашел, что смарт-стол очень похож, а также отвечает большинству моих потребностей. Тем не менее, у меня есть еще один запрос, который должен иметь эти стрелки ВВЕРХ/ВНИЗ, чтобы продвигать пользователей, эти столбцы сортируются.

Я получил способ стрелки, когда столбец отсортирован, НО я не знаю, как иметь стрелки вверх/вниз перед сортировкой и изменять стрелку вверх или вниз при сортировке столбца.

 <thead>
        <tr class="sortable">
            <th >Toggle Expand/Collapse</th>
            <th st-sort="projectName" st-sort-default="default" st-skip-natural="true">Project Name</th>
            <th st-sort="val" st-skip-natural="true">Project Value</th>
            <th st-sort="cost">Cost of Project</th>
            <th st-sort="cost_benefit_ratio">Cost Benefit Ratio</th>
            <th st-sort="creatorName">Creator</th>
            <th st-sort="create_at">Create Time</th>
            <th st-sort="LastEditorName">Last Editor</th>
            <th st-sort="edit_at">Edit Time</th>
            <th> Edit </th>
        </tr>
        <tr>
            <th colspan="10"><input st-search="" class="form-control" placeholder="global search ..." type="text"/></th>
        </tr>
    </thead>

См. Мою прикрепленную картинку.

Первое - это то, чего я хочу достичь. Вторая - моя текущая ситуация.