Angular Modal Tabbing Test

POC for Angular Modal Tabbing support

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<div ng-app="myApp">
    <parent>
        <a href="#">Launch modal</a>
    </parent>
    <br>
    <using-focus>
        <a href="#">Uses focus</a>
    </using-focus>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="tab-key">
        <div class="modal-header">
            <h3 id="" aria-describeby class="modal-title">I'm a modal123!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            <span tabindex="1000">This element appears first in the DOM but is second to last to be tabbed</b></span>
            <br>
            <span tabindex="0">Tabbable: <b>{{ name }}</b></span>
            <br>
            <span tabindex="10001">This element appears third in the DOM but is last to be tabbed</b></span>

        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
        </div>
    </script>
        <script type="text/ng-template" id="usingFocus.html">
        <div class="using-focus">
        <div class="modal-header">
            <h3 id="" aria-describeby class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
          ...

JavaScript

// POC using jQuery/UI for 
// WAI-ARIA 1.0 Authoring Practices, 3.3.1 Trapping Focus - http://www.w3.org/TR/wai-aria-practices/

angular.module('myApp', ['ui.bootstrap']).
directive('parent', function($modal) {
    return {
        restrict: 'E',
        link:function(scope, elm) {
            scope.name = 'This item is tabbable';
            elm.on('click', function() {
                $modal.open({
                  scope: scope,
                  templateUrl: 'myModalContent.html',
                  controller: ['$scope', '$modalInstance',
                  function($scope, $modalInstance) {
                    $scope.ok = function(result) {
                      $modalInstance.close(result);
                    };
                    $scope.cancel = function() {
                      $modalInstance.dismiss('cancel');
                    };
                  }]
                });
            });
            
        }
    }
}).

directive('usingFocus', function($modal) {
    return {
        restrict: 'E',
        link:function(scope, elm) {
            scope.name = 'This item is tabbable';
            elm.on('click', function() {
                $modal.open({
                  scope: scope,
                  templateUrl: 'usingFocus.html',
                  controller: ['$scope', '$modalInstance',
                  function($scope, $modalInstance) {
                    $scope.ok = function(result) {
                      $modalInstance.close(result);
                    };
                    $scope.cancel = function() {
                      $modalInstance.dismiss('cancel');
                    };
                  }]
                });
            });
            
        }
    }
}).

directive('tabKey', function() {
  return {
    restrict: 'C',
    scope: true,
    link: function(scope, elm) {
      elm.on('keyup', function(evt) {
        if (evt.which === 9) { // tab
        debugger;

           var children = _.sortBy($('.modal :tabbable'),...