highlighted ng-model jumping from one model to another

Question

I have 5 buttons. When I click different buttons at a fast rate, sometimes the previous highligted button will become highlighted again even if I don't click it.

in my controller

$scope.selectSidebarMenu = function(menu) {
    $scope.selected = menu;
};

$scope.isSelected = function($event, menu) {
    return $scope.selected === menu;
};

// Initialize variables
$scope.activateTransparent = false;

$scope.sidebarMenus = [
  { menuName : 'Button 1', width : 'medium-6', icon : 'fi-page-add'},
  { menuName : 'Button 2', width : 'medium-6', icon : 'fi-page-edit'},
  { menuName : 'Button 3', width : 'medium-6', icon : 'fi-page'},
  { menuName : 'Button 4', width : 'medium-6', icon : 'fi-page'},
  { menuName : 'Button 5', width : 'medium-12', icon : 'fi-page'}
];

in my template

<div class="row page">
    <div class="small-12 large-4 columns sidebar">
        <div class="row">
            <a ng-repeat="menu in sidebarMenus" class="{{menu.width}} columns menu-item button" ng-click="selectSidebarMenu(menu)">
                <div class="text-center">
                    <i class="show-for-large-up {{menu.icon}} size-36"></i>
                    <p class="size-12">{{menu.menuName}}</p>
                </div>
                <div class="disableBottomBorder" ng-class="{ enableBottomBorder : isSelected(menu) }"></div>
            </a>
        </div>
    </div>

    <div class="small-12 large-8 columns content">
        <h3>Content</h3>
        <p>Content goes in here</p>
    </div>
</div>

in my css

.disableBottomBorder {
    border-bottom: solid 4px $primary-color;
    width: 100%;
    display: inline-block;
    position: relative;
    bottom: -21px;
    opacity : 0;
}

.enableBottomBorder {
    border-bottom: solid 4px $primary-color;
    width: 100%;
    display: inline-block;
    position: relative;
    bottom: -21px;
    opacity : 1;
}

What I'm actually trying to do is put a bottom border on the button I clicked to show it's currently selected. I actually followed the implementation written on this jsfiddle - http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

I added disableBottomBorder because if I don't the buttons get messed up when selected. They won't maintain position without this class.

Answer 1

$scope.selected === menu;

Don't do absolute comparisons on objects. Instead Compare properties of the objects, preferably unique properties like 'menuName.'