JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="tddApp">
    <div ng-controller="MainCtrl">
        <div ng-repeat="event in displayEvents">
            <p ng-click="oddsBtnCallback('x','y','z')">{{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.$watch('betslipArray',function(val,old){
            console.log('Ctrlr');
            console.log(val)
        });
        $scope.$on('betslip.added',function(){
           $scope.betslipArray = BetslipService.betslipArray; 
        });
        $scope.betslipArray = BetslipService.betslipArray;
        $scope.oddsBtnCallback = BetslipService.addToBetslip;
        
        $scope.clearBetslip = function(){
            BetslipService.clearBetslip().then(function(){
                $scope.betslipArray = BetslipService.betslipArray;
            });
        };
        
    })
    
    .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.callback({
                        name: scope.eventName,
                        marketName: scope.marketName,
                        odds:scope.market
                    }).then(function(){
                        scope.$emit('betslip.added');
                    },function(){
                       alert('Failed to add item.'); 
                    });
                });
            }
        };
    })
    
    .factory ('BetslipService', function ($rootScope,$q,$timeout) {
        var rtnObject = {};
    
       ...