Angularjs: How To Unselect A Span When Selecting Another

I have a list of things that I display with ngrepeatthat when they are clicked, produce an additional list of things pertaining to the element selected. My intent is to have the cl

Solution 1:

Set and check selection in concrete element:

<div class="breakdownRow pointer" ng-class="{bSelection: m.selection}" ng-click="m.selection=true" ng-repeat="m in masterList">

UPDATE

for selected just one - save not bool, but index selected element. ng-repeat create own scope, so on click selection created for each item. you can use $parent to create one selection in parent scope.

<div class="breakdownRow pointer" ng-class="{bSelection: $parent.selection==$index}" ng-click="$parent.selection=$index" ng-repeat="m in masterList">

angular.module('app', [])
  .controller('controller', function($scope) {
    $scope.masterList = [1, 2, 3, 4, 5, 6, 7, 8];
  });

.breakdownRow {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
.bSelection {
  background-color: red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script><divng-app="app"ng-controller="controller"><divclass="breakdownRow pointer"ng-class="{bSelection: $parent.selection==$index}"ng-click="$parent.selection=$index"ng-repeat="m in masterList">
    {{m}}
  </div></div>