JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="TestApp">
    <div id="colLeft" ng-controller="LeftController">
        <div ng-repeat="bet in possibleBets">
            <button ng-class="!bet.moneyLineSelected ? 'lines-hover' : 'line-selected'" ng-click="addLineToBetSlip(bet)">{{bet.name}}</button>
        </div>
    </div>
    <div id="colRight" ng-controller="RightController">
        Your Bets:<br>
        <div ng-repeat="bet in bets">
            Active bet: {{bet.name}} - <button ng-click="removeLineFromBetSlip(bet)">&times;</button>
        </div>
    </div>
</div>

CSS

.lines-hover {
    
}

.line-selected {
    background:yellow;
}

#colLeft {
    width:65%;
    background:#f00;
    float:left;
}

#colRight {
    width:35%;
    background:gray;
    float:left;
}

JavaScript

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

app.controller('LeftController', function($scope, BetSlipFactory)
{
    $scope.possibleBets = [
        {name:'Bet 1',moneyLineSelected:false},
        {name:'Bet 2',moneyLineSelected:false},
        {name:'Bet 3',moneyLineSelected:false}
    ];
    
    $scope.addLineToBetSlip = function(bet)
    {
        bet.moneyLineSelected = !bet.moneyLineSelected;
        (bet.moneyLineSelected) ? BetSlipFactory.add(bet) : BetSlipFactory.remove(bet);   
    };
});

app.controller('RightController', function($scope, BetSlipFactory)
{
    $scope.bets = BetSlipFactory.getAllBets();
    
    $scope.removeLineFromBetSlip = function(bet)
    {
        bet.moneyLineSelected = false;
        BetSlipFactory.remove(bet);
    };
});

app.service('BetSlipFactory', function()
{
    var theBets = [];
    return {
        add: function(bet)
        {
            theBets.push(bet);
        },
        remove: function(bet)
        {
            var index = theBets.indexOf(bet);
            theBets.splice(index,1);
        },
        getAllBets: function()
        {
            return theBets;   
        }
    }
});

function log(msg)
{
    console.log(msg);
}