Simple tags input with autocomplete

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

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [
    { text: 'Tag1' },
    { text: 'Tag2' },
    { text: 'Tag3' }
  ];
  
  $scope.search = [];
   
  $scope.loadTags = function(query) {
    return $http.get('tags.json');
  };
  
  $scope.tagAdded = function(tag) {
    console.log(tag);
  };
  
  $scope.tagRemoved = function(tag) {
    console.log(tag);
  };
  
  $scope.createGroups = function(data) {
    var groups = [];
    var lastItem = null;
    
    for(var i = 0; i < data.length; i++) {
      var curDataItem = data[i];
    
      if(lastItem === null || curDataItem.type !== lastItem) {
        groups.push({title: curDataItem.type});
      }
      
      lastItem = curDataItem.type;
    }
    console.log(groups);
    return groups;
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.0.0/ng-tags-input.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.0.0/ng-tags-input.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
				<tags-input 
					ng-model="search" 
					add-on-enter="true" 
					add-from-autocomplete-only="false"
					on-tag-adding="tagAdded($tag)"
					on-tag-removing="tagRemoved($tag)"
					allow-leftover-text="true"
					add-on-blur="false"
					enable-editing-last-tag="false"
					placeholder="Search..">
				  		<auto-complete source="loadTags($query)" 
				  			select-first-match="false"
				  			min-length="2"
				  			template="cb-autocomplete-item">
				  		</auto-complete>
				</tags-input>
    <p>Model: {{search}}</p>
    
  <!-- AutoComplete Item -->
  <script type="text/ng-template" id="cb-autocomplete-item">
    <div class="pull-left">
      <i class="fa fa-tags" ng-if="data.type == 'Tag'"></i>
      <i class="fa fa-dot-circle-o" ng-if="data.type == 'Album'"></i>
      <i class="fa fa-music" ng-if="data.type == 'Track'"></i>
      <i class="fa fa-user" ng-if="data.type == 'Composer'"></i>
    </div>
    <div class="pull-right">
      <span ng-bind-html="$highlight($getDisplayText())"></span>
      <span>{{data.type}}</span>
    </div>
  </script>    

  <!-- AutoComplete -->
  <script type="text/ng-template" id="ngTagsInput/auto-complete.html">
    <div class="autocomplete" ng-if="suggestionList.visible">
      <ul>
        <li ng-repeat="item in $parent.$parent.createGroups(suggestionList.items)">
          {{item.title}}
        </li>
      </ul>
      <ul class="suggestion-list">
        <li class="suggestion-item" ng-repeat="item in suggestionList.items track by track(item)" ng-class="{selected: item == suggestionList.selected}" ng-click="addSuggestionByIndex($index)" 
          ng-mouseenter="suggestionList.select($index)">
            <ti-autocomplete-match data="::item">
            </ti-autocomplete-match>
        </li>
      </ul>
    </div>
  </script> 

  </body>

</html>

[
  { "text": "Tag1", "type": "Tag" },
  { "text": "Tag2", "type": "Tag" },
  { "text": "Tag3", "type": "Album" },
  { "text": "Tag4", "type": "Album" },
  { "text": "Tag5", "type": "Album" },
  { "text": "Tag6", "type": "Composer" },
  { "text": "Tag7", "type": "Composer" },
  { "text": "Tag8", "type": "Track" },
  { "text": "Tag9", "type": "Track"},
  { "text": "Tag10", "type": "Track" }
]