Custom-Styled multiple autocomplete without INPUT/SELECT tag

HTML

  <div id="sh2">
    <span ng-repeat="obj in foo5 track by $index">
      {{'('+obj.key+') '+obj.text}})
      <a href="" ng-click="foo5.splice($index, 1)">x
    </span>
    <auto-complete-div
      multiple
      default-style="false"
      ng-model="foo5"
      source="source3"
      value-changed="callback(value)"
      value-property="key"
      display-property="text">
      <input size="2" />
      <ul>
    </auto-complete-div>
  </div>

CSS

  
  div {
    box-sizing: border-box
  }
  #sh2 {
    display: inline-block;
    background-color: lightblue;
    border-radius: 10px;
    padding: 10px;
    width: 500px;
    height: auto;
    min-height: 100px;
  }

  #sh2 span {
    display: inline-block;
    background-color: darkblue;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
  }

  #sh2 span a {
    color: red;
    text-decoration: none;
  }
  auto-complete-div {
    position: relative;
    display: inline-block;
  }
  auto-complete-div input {
    outline: none;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 2px 0 0 3px;
  }
  auto-complete-div ul {
    background-color: yellow;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 3px #ccc;
    box-sizing: border-box;
    display : none;
    left: 0;
    list-style-type: none;
    margin-top: 2px;
    margin: 0;
    min-width: 300px;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    top: 1.5em;
    width: auto;
  }
  auto-complete-div ul li {
    padding: 2px 5px;
    border-bottom: 1px solid #ccc;
  }

  auto-complete-div ul li.selected {
    background-color: #ccc;
  }

  auto-complete-div ul li.key1 {
    background-color: red;
  }
  auto-complete-div ul li.key2 {
    background-color: green; color: #fff;
  }
  auto-complete-div ul li.key3 {
    background-color: blue;
  }
  auto-complete-div ul li.key3 {
    background-color: darkblue;  color: #fff;
  }

  #sh2 span.key1 { background-color: red; }
  #sh2 span.key2 { background-color: green; }
  #sh2 span.key3 { background-color: blue; }
  #sh2 span.key4 { background-color: darkblue; }

  

Javascript

  
  angular.module('myApp', ['angularjs-autocomplete']).controller('MyCtrl', function($scope) {
    $scope.source3 = [{key:1, text:'One'}, {key:2, text:'Two'}, {key:3, text:'Three'}, {key:4, text:'Four'}];
    $scope.callback = function(arg) {
      console.log('value selected by autocomplete: ', arg);
    };
    $scope.foo5 = [{"key":4,"text":"Autocomplete"}];
  });