show and hide arrow icon according sorting in angular .js

Question

i am trying to show and hide arrow icon according sorting . i am new in angular js please help i am using bootstrap

<div ng-controller="PurchasesCtrl">
    <h2>Purchases:</h2>
    <table class="table">
    <thead>
        <tr >

            <th  ng-click="changeSorting('username')" >UserName <span  class="glyphicon glyphicon-chevron-up"></span><span  class="glyphicon glyphicon-chevron-down"></span></th>
            <th   ng-click="changeSorting('usertype')">UserType</th>
            <th  ng-click="changeSorting('age')" >Age</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="purchase in purchases.data|orderBy:sort.column:sort.descending">

            <td >{{purchase.username}}</td>
            <td>{{purchase.usertype}}</td>
            <td>{{purchase.age}}</td>
        </tr>
        </tbody>
    </table>
</div>

angular js sorting

var myApp = angular.module("myApp",[]);

myApp.factory("Purchases", function(){
    var Purchases = {};

    Purchases.data = [
        {
            username: "suraj kumar gosi",
            usertype: "sponer",
            age: "20"

        },
        {
            username: "kao kumar gosi",
            usertype: "clinet",
            age: "26"
        },
        {
             username: "surdfsdfaj kumar gosi",
            usertype: "clinfsdfset",
            age: "50"
        }
    ];
    return Purchases;
});

function PurchasesCtrl($scope, Purchases){
    $scope.purchases = Purchases;
    $scope.sort = {
        column: '',
        descending: false

    };  


    $scope.changeSorting = function(column) {

        var sort = $scope.sort;

        if (sort.column == column) {
            sort.descending = !sort.descending;
        } else {
            sort.column = column;
            sort.descending = false;
        }
    };
}

please hlep on this . thanks in advance

Answer 1

Update 2: Ok this is much better than my previous answer. Fiddle

Markup:

<th ng-click="changeSorting('username')">
    UserName 

    <!-- <i> is common for icons -->
    <i class="glyphicon" ng-class="getIcon('username')"></i>
</th>
...

<tr ng-repeat="purchase in purchases.data | 
               orderBy:sort.active:sort.descending">

Then in your controller:

$scope.sort = {
  active: '',
  descending: undefined
}     

$scope.changeSorting = function(column) {

  var sort = $scope.sort;

  if (sort.active == column) {
     sort.descending = !sort.descending;
  } 
  else {
    sort.active = column;
    sort.descending = false;
  }
};

$scope.getIcon = function(column) {

  var sort = $scope.sort;

  if (sort.active == column) {
    return sort.descending
      ? 'glyphicon-chevron-up'
      : 'glyphicon-chevron-down';
    }

  return 'glyphicon-star';
}