Add a border style on click along with adding item to cart

Question

I am trying to add a border to a div that houses my product. I want it to work together with the ng-click I already have that adds the product to the cart. So, when a user clicks the 'select' button a border goes around that product letting them know they have selected it, if they click on another product it deselects the current one and selects the one clicked.

I have set it up many ways, but this is the closest I got. When the button is clicked it is putting style on all the products/divs. Any help would be awesome. I am new to Angular and this is breaking my brain.

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.isSelected = false;
$scope.activeProduct = function() {
    $scope.isSelected = !$scope.isSelected;
  };
  
 });

.clear
{
    clear: both;
}

.product-chooser{
    margin-right: 0;
}

	.product-chooser .product-chooser-item{
		padding: 11px;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		border: 1px solid #efefef;
		margin-bottom: 10px;
        margin-left: 10px;
	}

	.selected {
		border: 4px solid #D9534F;
		background: #efefef;
		padding: 8px;
		filter: alpha(opacity=100);
		opacity: 1;
	}

		.product-chooser .product-chooser-item img{
			padding: 0;
		}

		.title{
			display: block;
			margin: 10px 0 5px 0;
			font-weight: bold;
			font-size: 12px;
		}

		.description{
			font-size: 12px;
		}

<div class="row form-group product-chooser">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" ng-repeat="product in products">
            <div ng-class="{'selected': isSelected}" class="product-chooser-item">
                <img ng-src="{{product.product_image}}" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="">
                <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
                    <span class="title">{{product.product_name}}</span>
                    <span class="description">{{product.product_desc}}</span>
                    <button class="btn btn-success" ng-click="addProductToCart(product); activeProduct()">Select Package</button>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>

I think my ng-repeat in there is messing it up, but i need it in order to pull my items from my DataBase.

Answer 1

Replace your HTML with this

You had a quote for the class that you want to apply if isSelected turns true.

<div class="row form-group product-chooser">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" ng-repeat="product in products">
            <div ng-class="{selected: isSelected}" class="product-chooser-item">
                <img ng-src="{{product.product_image}}" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="">
                <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
                    <span class="title">{{product.product_name}}</span>
                    <span class="description">{{product.product_desc}}</span>
                    <button class="btn btn-success" ng-click="addProductToCart(product); activeProduct()">Select Package</button>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>