How to show the correct icon for sorting for column


#1

I am implementing a sorting for list in ionic 1 framework.

I want the sorting column show the arrow up or down if it is selected only as below.
Example:

when sort age from ascending

enter image description here

when sort name from descending

enter image description here

However, as my code shown in ionic, it will show both arrow up and down, regardless what I want to sort

html

<div class="col col-33" ng-click="reverse = (orderWith=='Name')? !reverse: reverse;orderWith='Name'">Name<i class="material-icons">&#xE316;</i>?<i class="material-icons">&#xE313;</i></div>
<div class="col" ng-click="reverse = (orderWith=='Trade')? !reverse: reverse;orderWith='Trade'">Call<i class="material-icons">&#xE316;</i>?<i class="material-icons">&#xE313;</i></div>
<div class="col" ng-click="reverse = (orderWith=='num')? !reverse: reverse;orderWith='num'">Number<i class="material-icons">&#xE316;</i>?<i class="material-icons">&#xE313;</i></div>

enter image description here

How to make the header sorting like the picture above which show only arrow up when ascending and arrow down for descending for the column selected only?