Bootstrap dropdown not working with key board events

Question

HTML:

<input type="text" placeholder="Enter some data" />
<div class="dropdown" style="width:200px">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true" style="width:100%; text-align:left">
        {{selectedSite}}
    <span class="caret" style="left: 90%;top: 45%;position: absolute;" tabindex="-1"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" >
        <li ng-repeat="site in sites"role="presentation"><a role="menuitem" tabindex="-1" ng-click="setSelectedSiteVal(site)">{{site}}</a></li>
    </ul>
</div>

Controller:

$scope.sites = ["A", "B", "C", "D"];
$scope.selectedSite = $scope.sites[0];

$scope.setSelectedSiteVal = function(siteName){
    $scope.selectedSite = siteName;
}

After entering some data in the first text box, if we click 'tab' and then 'enter' key, it is showing the dropdown list. But, I am not able to select any particular item from the dropdown using key board events. I am able to select from drop down using the mouse pointer, but not with the key board events. Any help or suggestions?

http://plnkr.co/edit/gvIYdi23Yu2svbG1sqz6?p=preview

Answer 1

I forked your plunkr here. I added this bit of javascript to the page to listen for the enter key. I commented out the code I thought should run, but doesn't since that function isn't included.

    $(document).ready(function(){
      $(document).on('keypress', '.dropdown-menu>li>a', function(e){
        if(e.which==13){
          //setSelectedSiteVal($(this).text());
          $(this).closest('.dropdown').find('.dropdown-toggle').text($(this).text())
        }
      });
    })

HTH

-Ted