How to change other element classes by clicking on an element inside ng-repeat

Question

I have an ng-repeat code in angularjs like this:

<th ng-repeat="row in results.rows track by $index">
  {{row.name | translate}}
  <a class="sort" 
     ng-click="orderResultDataEvent($index)" 
     ng-if="results.tableOptions.sortable">
    <i ng-class="{'icon icon-exc-column-hover-sort': row.isReverseOrder == null,'icon icon-exc-sort-numeric-1-9': row.isReverseOrder === false , 'icon icon-exc-sort-numeric-9-1': row.isReverseOrder === true }" 
       class="text-white" 
       aria-hidden="true">
    </i>
  </a>
</th>

Also a result table like this:

what I'm looking is: when a user clicks on the first column for sorting, the other columns icon will be changed to the defualt icon like the first column. and icon of the first column, will be changed to sorted icon.

what happens right now is, other icons won't be changed when for example a user clicks on the first column sort icon.

Answer 1

You can try like the below code. Also you can check this plunker for your working example scenario.

Template:

<th ng-repeat="hed in results.header track by $index"  ng-click="setSelected($index)">
   {{hed.value}}
   <a class="sort">
      <span class="actual" ng-class="{'toggle': $index === selectedId }">#</span>
   </a>
</th>

Controller:

$scope.selectedId = null;
$scope.setSelected = function($index) {
   $scope.selectedId = $index;
   console.log($scope.selectedId);
}