ngTagsInput - custom templates

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

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [
    { name: "Brazil", flag: "Brazil.png" },
    { name: "Italy", flag: "Italy.png" },
    { name: "Spain", flag: "Spain.png" },
    { name: "Germany", flag: "Germany.png" },
  ];
  
  $scope.loadCountries = function($query) {
    return $http.get('countries.json', { cache: true}).then(function(response) {
      var countries = response.data;
      return countries.filter(function(country) {
        return country.name.toLowerCase().indexOf($query.toLowerCase()) != -1;
      });
    });
  };
});

<!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="style.css" />
    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <tags-input ng-model="tags" 
                display-property="name" 
                placeholder="Add a country" 
                replace-spaces-with-dashes="false"
                template="tag-template">
      <auto-complete source="loadCountries($query)"
                     min-length="0"
                     load-on-focus="true"
                     load-on-empty="true"
                     max-results-to-show="32"
                     template="autocomplete-template"></auto-complete>
    </tags-input>
    
    <script type="text/ng-template" id="tag-template">
      <div class="tag-template">
        <div class="left-panel">
          <img ng-src="http://mbenford.github.io/ngTagsInput/images/flags/{{data.flag}}" ng-if="data.flag"/>
        </div>
        <div class="right-panel">
          <span>{{$getDisplayText()}}</span>
          <a class="remove-button" ng-click="$removeTag()">&#10006;</a>
        </div>
      </div>
    </script>
    
    <script type="text/ng-template" id="autocomplete-template">
      <div class="autocomplete-template">
        <div class="left-panel">
          <img ng-src="http://mbenford.github.io/ngTagsInput/images/flags/{{data.flag}}" />
        </div>
        <div class="right-panel">
          <span ng-bind-html="$highlight($getDisplayText())"></span>
          <span>({{data.rank}})</span>
          <span>{{data.confederation}}</span>
        </div>
      </div>
    </script>
  </body>

</html>

.tag-template .left-panel {
  float: left;
}

.tag-template .left-panel img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.tag-template .right-panel {
  float: left;
  margin-left: 5px;
}

.autocomplete-template .left-panel {
  float: left;
}

.autocomplete-template .left-panel img {
  width: 48px;
  height: 48px;
  vertical-align: middle;
}

.autocomplete-template .right-panel {
  float: left;
  margin-left: 5px;
  margin-top: 7px;
}

.autocomplete-template .right-panel span:first-child {
  font-size: 16px;
}

.autocomplete-template .right-panel span:nth-child(2) {
  font-size: 14px;
  color: gray;
}

.autocomplete-template .right-panel span:last-child {
  display: block;
  font-size: 14px;
  font-style: italic;
}

[
    { "name": "Algeria", "flag": "Algeria.png", "confederation": "CAF", "rank": 21 },
    { "name": "Argentina", "flag": "Argentina.png", "confederation": "CONMEBOL", "rank": 5 },
    { "name": "Australia", "flag": "Australia.png", "confederation": "AFC", "rank": 32 },
    { "name": "Belgium", "flag": "Belgium.png", "confederation": "UEFA", "rank": 11 },
    { "name": "Bosnia and Herzegovina", "flag": "Bosnia-and-Herzegovina.png", "confederation": "UEFA", "rank": 20 },
    { "name": "Brazil", "flag": "Brazil.png", "confederation": "CONMEBOL", "rank": 3 },
    { "name": "Cameroon", "flag": "Cameroon.png", "confederation": "CAF", "rank": 30 },
    { "name": "Chile", "flag": "Chile.png", "confederation": "CONMEBOL", "rank": 14 },
    { "name": "Colombia", "flag": "Colombia.png", "confederation": "CONMEBOL", "rank": 8 },
    { "name": "Costa Rica", "flag": "Costa-Rica.png", "confederation": "CONCACAF", "rank": 24 },
    { "name": "Croatia", "flag": "Croatia.png", "confederation": "UEFA", "rank": 17 },
    { "name": "Ecuador", "flag": "Ecuador.png", "confederation": "CONMEBOL", "rank": 23 },
    { "name": "England", "flag": "England.png", "confederation": "UEFA", "rank": 10 },
    { "name": "France", "flag": "France.png", "confederation": "UEFA", "rank": 16 },
    { "name": "Germany", "flag": "Germany.png", "confederation": "UEFA", "rank": 2 },
    { "name": "Ghana", "flag": "Ghana.png", "confederation": "CAF", "rank": 26 },
    { "name": "Greece", "flag": "Greece.png", "confederation": "UEFA", "rank": 12 },
    { "name": "Honduras", "flag": "Honduras.png", "confederation": "CONCACAF", "rank": 25 },
    { "name": "Iran", "flag": "Iran.png", "confederation": "AFC", "rank": 27 },
    { "name": "Italy", "flag": "Italy.png", "confederation": "UEFA", "rank": 9 },
    { "name": "Ivory Coast", "flag": "Cote-dIvoire.png", "confederation": "CAF", "rank": 22 },
    { "name": "Japan", "flag": "Japan.png", "confederation": "AFC", "rank": 29 },
    { "name": "Mexico", "flag": "Mexico.png", "confederation": "CONCACAF", "rank": 19 },
    { "name": "Netherlands", "flag": "Netherlands.png", "confederation": "UEFA", "rank": 15 },
    { "name": "Nigeria", "flag": "Nigeria.png", "confederation": "CAF", "rank": 28 },
    { "name": "Portugal", "flag": "Portugal.png", "confederation": "UEFA", "rank": 4 },
    { "name": "Russia", "flag": "Russia.png", "confederation": "UEFA", "rank": 18 },
    { "name": "South Korea", "flag": "South-Korea.png", "confederation": "AFC", "rank": 31 },
    { "name": "Spain", "flag": "Spain.png", "confederation": "UEFA", "rank": 1 },
    { "name": "Switzerland", "flag": "Switzerland.png", "confederation": "UEFA", "rank": 6 },
    { "name": "United States", "flag": "United-States.png", "confederation": "CONCACAF", "rank": 13 },
    { "name": "Uruguay", "flag": "Uruguay.png", "confederation": "CONMEBOL", "rank": 7 }
]