Table column sorting and toggling of image - toggle

Question

This is HTML snippet
View of table header with the arrow definedThis image shows the arrow postion in the columns
<!--This is controller CODE which contains object details which is populating the code and function for sort.-->
$scope.all_columns = ["RAG Status","Status","Bundle ID","Bundle Name", "#of orders","# of closed orders","Actions"];
$scope.options1 = ["1","5","10","15"];
$scope.bundles = {
RAGStatus: "",
Status: "",
BundleID: "",
BundleName: "",
ofOrders: "",
ofClosedOrders: "",
Actions: ""
}
$scope.toggleCustom = function() {
$scope.custom = !$scope.custom;
};
$scope.dataSort = function(predicate){
//$scope.predicate = predicate;
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
$scope.toggleCustom();
<th><input type="checkbox" ng-model="allItemsSelected" ng-change="selectAll()">Select All
</th>
</label>
<th>{{ all_columns[0]}}&nbsp<span ng-if="!custom" ng-click="dataSort('RAGStatus')"><img class="img"
ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('RAGStatus')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span>
</th>
<th>{{ all_columns[1]}}&nbsp<span ng-if="!custom" ng-click="dataSort('Status')"><img class="img"
ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('Status')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span>
</th>
<th>{{ all_columns[2]}}&nbsp<span ng-if="!custom" ng-click="dataSort('BundleID')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('BundleID')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span>
</th>
<th>{{ all_columns[3]}}&nbsp <span ng-if="!custom" ng-click="dataSort('BundleName')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('BundleName')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span></th>
<th>{{ all_columns[4]}}&nbsp<span ng-if="!custom" ng-click="dataSort('ofOrders')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('ofOrders')"><img class="img"
ng-src="resources/images/up-black-arrow.png">
</span></th>
<th>{{ all_columns[5]}}&nbsp<span ng-if="!custom" ng-click="dataSort('ofClosedOrders')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('ofClosedOrders')"><img class="img"
ng-src="resources/images/up-black-arrow.png">
</span></th>
<th>{{ all_columns[6]}}&nbsp <span ng-if="!custom" ng-click="dataSort('Actions')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('Actions')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span></th>
This is controller CODE which contains object details which is populating the code and function for sort.
So i am trying to click on particular column for sorting that column its image(arrow) is changing which is acceptable but image(arrow) of other columns are also changing which is not acceptable and it is getting changed as for toggling i have used same bollean vaiable(custom).