JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="testApp" ng-controller="ListController">
    <div>
        <strong>Gold: </strong>
        {{player.gold}}
    </div>
    <div class="list-group">
         <a href="#"
            class="list-group-item"
            ng-repeat="item in items"
            ng-context-menu="menuOptions">
             <span class="badge">{{item.cost}}</span>
             {{item.name}}
        </a>
    </div>
</div>

CSS

body > div,
body > div > div {
    padding: 10px;
}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

JavaScript

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

app.controller('ListController', ['$scope',
    function ($scope) {
        $scope.player = {
            gold: 100
        };
        $scope.items = [
            { name: 'Small Health Potion', cost: 4 },
            { name: 'Small Mana Potion', cost: 5 },
            { name: 'Iron Short Sword', cost: 12 }
        ];
        $scope.menuOptions = [
            ['Buy', function ($itemScope) {
                $scope.player.gold -= $itemScope.item.cost;
            }],
            null,
            ['Sell', function ($itemScope) {
                $scope.player.gold += $itemScope.item.cost;
            }],
            null,
            ['More...', [
             ['Buy 5', function ($itemScope) {
                $scope.player.gold -= $itemScope.item.cost * 5;
              }],
              null,
              ['Sell 5', function ($itemScope) {
                  $scope.player.gold += $itemScope.item.cost * 5;
              }]
            ]]
        ];
    }
]);

app.directive('ngContextMenu', function ($parse) {
    var buildMenuItem = function($, $scope, list, item) {
       var $li = $('<li>');
        if (item === null) {
            $li.addClass('divider');
        } else if(item[1] instanceof Array) {
            $li.addClass("dropdown-submenu");
            var $subMenu = $('<ul class="dropdown-menu">');
            
            item[1].forEach(function (subItem, x) {
                buildMenuItem($, $scope, $subMenu, subItem);
            });
            
            $a = $('<a>');
            $a.text(item[0]);
            $li.append($a);
            $li.append($subMenu);
        } else {
            $a = $('<a>');
            $a.attr({ tabindex: '-1', href: '#' });
            $a.text(item[0]);
            $li.append($a);
            $li.on('click', function () {
                $scope.$apply(function() {
                    item[1].call($scope, $scope);
                });
            });
        }
       ...