AngularJS: How to unselect a span when selecting another

Tags: javascript,html,css,angularjs

Problem :

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 clicked element's background change color so as to show it selected. My issue is when I select another element, they both show as selected. Here is my code:

<div class="breakdownRow pointer" ng-class="{bSelection: selection}" ng-click="selection=true" ng-repeat="m in masterList">
    <span class="areaTag">{{m.area}}</span>
    <span class="storeNumTag" ng-repeat="v in m.valueList track by $index">{{v.toLocaleString()}} </span>

As noted before, the first click event works great. bSelection is my css class that has the changing of the background color. Again my issue is that once another element is clicked, the previous doesn't "unselect" per se.

Question: How do I un-give a class to an element when another element has been selected so that only one shows as highlighted at a time?

Solution :

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">


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;
<script src=""></script>
<div ng-app="app" ng-controller="controller">
  <div class="breakdownRow pointer" ng-class="{bSelection: $parent.selection==$index}" ng-click="$parent.selection=$index" ng-repeat="m in masterList">

    CSS Howto..

    ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

    How to change dropdownlist width to 100% using CSS

    How to make margin collapsing work with input type=button/submit?

    How to ensure dynamic CSS is loaded first before AJAX content?

    How to use CSS import in Liferay? CSS fast load works bad

    How to echo individual css classes for li's?

    How read(get) css style value of a server-side div in code behind(not set)?

    How do I inline the :before element when unable to include a CSS/style section?

    How do i make a div stick down from his div container?

    How to add “pause” button in this jquery slider?

    How to overlap other elements using resizable element?

    How to make the height of the div take all the space?

    How to remove css property from last child element?

    How to highlight a currently selected item/section in Wordpress with CSS (maybe PHP too)?

    How can I position a form with controls over a Google Map?

    How to select elements when there is a space in an HTML class

    How to make text input in table cell grow beyond the limits of the table when selected?

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    how to overide css class with an underlying class

    How to do Vertical+Horizontal centering in CSS

    In how many ways and places we can place comment in CSS?

    How to create a top-footer and footer using foundation, just like foundation website

    How can I override an external css?

    How to load a apply jQuery function upon appending a
    via Ajax?

    how to translate this xpath into css selector

    stopping slideshow and continue after 3 seconds

    How do i make the evenly spread elements in my nav bar not touch the edges of the page?

    How do a Add scroll bar with fixed header

    How to accurately position divs with css

    How to make circle by using HTML CSS only?