AngularJS autocomplete directive in a modal Demo

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="style.css"> 
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
  <script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>

</head>

<body> 
  <script>
    angular.module('Station', ['Station.directives', 'ui.bootstrap']);
 
    function StationParamsCtrl($scope, $modal) {

      $scope.open = function() {

        $modal.open({
            templateUrl: 'ModalContent.html',
            backdrop: true, 
            windowClass: 'modal',
            controller: function($scope, $modalInstance) {
              $scope.arrival_station = {
                "id": 0,
                "name": ""
              };
              
              $scope.fetchList = function(startsWith, response) {
                response([{
                    id: "7017",
                    "name": "Avignon TGV"
                  }, {
                    "id": "7164",
                    "name": "Aix-en-Provence TGV"
                  }, {
                    "id": "7089",
                    "name": "Aeroport-Paris-Roissy-Charles-de-Gaulle CDG"
                  }, {
                    "id": "7126",
                    "name": "Angers St-Laud"
                  }, {
                    "id": "3543",
                    "name": "Annecy"
                  }, {
                    "id": "3542",
                    "name": "Angouleme"
                  },

                ]);

              };

            }
        });
      }
    }  
            StationParamsCtrl.$inject = ['$scope','$modal'];

            angular.module('Station.directives', [])
              .directive('autocomplete', function($parse) {
                return {
                  restrict: 'E',
                  replace: true,
                  template: '<input type="text"/>',
                  link: function(scope, element, attrs) {
                    scope.$watch(attrs.selection, function(selection) {
                      // event when select item
                      element.on("autocompleteselect", function(e, ui) {
                        e.preventDefault(); // prevent the "value" being written back after we've done our own changes
                        this.value = ui.item.name;
                      });

                      element.autocomplete({
                        source: scope.fetchList,
                        select: function(event, ui) {
                          scope.$apply(function() {
                            $parse(attrs.selection)
                              .assign(scope, {
                                name: ui.item.name,
                                id: ui.item.id,
                              });
                          });
                        }
                      }) // to display name instead of default label attribute
                      .data("ui-autocomplete")._renderItem = function(ul, item) {
                        return $("<li></li>")
                          .data("item.autocomplete", item)
                          .append("<a>" + item.name + "</a>")
                          .appendTo(ul);
                      };


                    });
                  }
                };
              });
  </script>
  <div ng-app="Station" ng-controller="StationParamsCtrl">

 
    <button class="btn primary blue" ng-click="open();">Open modal</button>
    <script type="text/ng-template" id="ModalContent.html">
       
      <autocomplete placeholder="Enter destination"
      style="width:100%" selection="selection" source="fetchList" / >
      {{$scope.arrival_station.id}}

    </script>


  </div>
</body>

</html>

/* Styles go here */


  
.blue {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  background: rgb(66, 184, 221);
  font-size: 125%;
  margin: 40px;
}

.ui-autocomplete {
    z-index: 1051; /* z-index of modal is equal to 1050. */
}



AngularJS autocomplete directive in a modal Demo

fixme: the list of items is displayed behind the modal instead of
into the modal