Searchable, scrollable dropdown button using angularjs and bootstrap

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="dropdown dropdown-scroll" ng-app="app">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Select <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="ListCtrl">
      <li role="presentation">
        <div class="input-group input-group-sm search-control"><span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
          <input type="text" class="form-control" placeholder="Query" ng-model="query">
        </div>
      </li>
      <li role="presentation" ng-repeat='item in items | filter:query'>
        <a href="#"> {{item.name}} </a>
      </li>
    </ul>
  </div>
  <script>
    $('.dropdown-menu').find('input').click(function (e) {
      e.stopPropagation();
    });
  </script>  
</body>
</html>

// Angular

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

phonecatApp.controller('ListCtrl', function ($scope) {
    $scope.items = [{
        'name': 'Item 1'
    }, {
        'name': 'Item 2'
    }, {
        'name': 'Account 3'
    }, {
        'name': 'Account 4'
    }, {
        'name': 'Item 5'
    }, {
        'name': 'Item 6'
    }, {
        'name': 'User 7'
    }, {
        'name': 'User 8'
    }, {
        'name': 'Item 9'
    }, {
        'name': 'Item 10'
    }, {
        'name': 'Item 11'
    }, {
        'name': 'Item 12'
    }, {
        'name': 'Item 13'
    }, {
        'name': 'Item 14'
    }, {
        'name': 'User 15'
    }, {
        'name': 'User 16'
    }, {
        'name': 'Person 17'
    }, {
        'name': 'Person 18'
    }, {
        'name': 'Person 19'
    }, {
        'name': 'Item 20'
    }, ];
});

.dropdown.dropdown-scroll .dropdown-menu {
    max-height: 200px;
    width: 60px;
    overflow: auto;
}
.search-control {
    padding: 5px 10px;
}

Searchable, scrollable dropdown button using angularjs and bootstrap