Angular Bootstrap implementation for keyboard accessible dropdown submenu

http://stackoverflow.com/questions/31463297/angular-bootstrap-implementation-for-keyboard-accessible-dropdown-submenu

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <div class="dropdown"> 
        
        <a class="dropdown-toggle btn btn-primary" id="DropdownButton" data-toggle="dropdown" role="button" href="#">DROPDOWN</a>

        <ul class="dropdown-menu" role="menu" aria-labelledby="DropdownButton">
            <li role="presentation"> 
                <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('1')">option 1</a>
            </li>
            <li role="presentation"> 
                <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('2')">option 2</a>
            </li>
            <li role="presentation"> 
                <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('3')">option 3</a>
            </li>
            <li role="presentation" class="dropdown dropdown-submenu" custom-submenu> 
                
                <a class="dropdown-toggle" id="SubmenuButton" role="menuitem" tabindex="0" href="#" aria-haspopup="true">option 4 (has children)</a>

                <ul class="dropdown-menu" role="menu" aria-hidden="true" aria-labelledby="SubmenuButton">
                    <li role="presentation"> 
                        <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('submenu item 1')">
                            child option 1
                        </a>
                    </li>
                    <li role="presentation"> 
                        <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('submenu item 2')">
                            child option 2
                        </a>
                    </li>
                    <li role="presentation"> 
                        <a role="menuitem" tabindex="0" href="#"...

CSS

/* 
 * No submenu in Bootstrap 3 - need to put CSS in manually.
 * All CSS from http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing 
 */

.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 myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.selectItem = function (item) {
        alert(item);
    };
}

myApp.directive("customSubmenu", ['$timeout', function ($timeout) {
    return {
        link: function ($scope, element, attrs) {

            var toggleButton = $(element).find('.dropdown-toggle');
            var submenu = $(element).find('.dropdown-menu');

            /* 
             * handle keydown on the submenu itself - if we arrow up from the first element or down from the last,
             * close submenu
             */
            submenu.keydown(function (event) {
                if (!(event.keyCode === 38 || event.keyCode === 40)) return;

                var links = $(element).find('li:not(.divider):not(.disabled) a');

                if (event.keyCode === 38 && event.target == links[0]) {
                    // first submenu item - up arrow - close submenu, focus toggle button, stop propagation
                    $(element).removeClass('open');
                    submenu.attr('aria-hidden', true);
                    toggleButton.focus();
                    event.stopPropagation();
                    event.preventDefault();
                } else if (event.keyCode === 40 && event.target == links[links.length - 1]) {
                    // last submenu item - down arrow - close submenu, focus toggle button, stop propagation
                    $(element).removeClass('open');
                    submenu.attr('aria-hidden', true);
                    toggleButton.focus();
                    event.stopPropagation();
                    event.preventDefault();
                }
            });

            /* 
             * handle keydown on toggle button - space toggles submenu visibility, arrows navigate outer menu
             */
            toggleButton.keydown(function (event) {
                if (event.keyCode === 32) { // space bar - open/close submenu
                    if...