JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="tddApp">
    <div ng-controller="MainCtrl">
        <div ng-repeat="event in displayEvents">
            <p>{{event.name}}</p>
            <div odds-button market="{{event.markets.home}}"
                market-name="home"
                event-name="{{event.name}}"
                callback="oddsBtnCallback(name, marketName, odds)">
            </div>
            <div odds-button market="{{event.markets.draw}}"
                market-name="draw"
                event-name="{{event.name}}"
                callback="oddsBtnCallback(name, marketName, odds)">
            </div>
            <div odds-button market="{{event.markets.away}}"
                market-name="away"
                event-name="{{event.name}}"
                callback="oddsBtnCallback(name, marketName, odds)">
            </div>
        </div>
        <h3>Betslip</h3>
        <div ng-repeat="selection in betslipArray">
            {{selection}}
        </div>
        <button ng-click="clearBetslip()">
            Clear
        </button>
    </div>
</div>

CSS

.odds-btn {
    display: inline-block;
    position: relative;
    text-align: center;
    border: 1px solid gray;
    font-size:11px;
    color: #474747;
    background: #d6df3e;
    height: 24px;
    font-weight: bold;
    line-height:22px;
    width:43px;
}

.betslip h3 {
    margin-top: 0;
    padding-top: 0;
}

JavaScript

angular.module('tddApp', [])
    
    .controller('MainCtrl', function ($scope, $rootScope, BetslipService) {
        $scope.displayEvents = [
            {
                id: 1,
                name: 'Belarus v Ukraine',
                homeTeam: 'Belarus',
                awayTeam: 'Ukraine',
                markets: {home: '2/1', draw: '3/2', away: '5/3'},
                display: true
            }
        ];
        $scope.betslipArray = BetslipService.betslipArray;
        $scope.oddsBtnCallback = BetslipService.addToBetslip;
        $scope.clearBetslip = BetslipService.clearBetslip;
        BetslipService.context = $scope;
    })
    
    .directive('oddsButton', function () {
        return {
            template: '<div class="odds-btn">{{market}}</div>',
            replace: true,
            scope: {
                market: '@',
                marketName: '@',
                eventName: '@',
                callback: '&'
            },
            link: function (scope, element) {
                element.on('click', function() {
                    scope.$apply(scope.callback({
                        name: scope.eventName,
                        marketName: scope.marketName,
                        odds:scope.market
                    }));
                });
            }
        };
    })
    
    .factory ('BetslipService', function ($rootScope) {
        var rtnObject = {};
        rtnObject.context = undefined;
        rtnObject.betslipArray = ['xxx'];
    
        rtnObject.addToBetslip = function (name, marketName, odds) {
            rtnObject.betslipArray.push({
                eventName: name,
                marketName: marketName,
                odds: odds
            });
            console.log(rtnObject.context);
        };
    
        rtnObject.clearBetslip = function () {
            while (rtnObject.betslipArray.length > 0) {
                rtnObject.betslipArray.pop();
            }
        };
    
        return rtnObject;
   ...