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

app.controller('MainCtrl', function($scope, $http) {
  $scope.movies = [
    'The Dark Knight',
    'The Dark Knight Rises',
    'Kill Bill: Vol. 1',
    'Terminator 2: Judgment Day',
    'The Matrix',
    'Minority Report',
    'The Bourne Ultimatum',
  $scope.loadMovies = function(query) {
    return $http.get('movies.json');
<!DOCTYPE html>
<html ng-app="plunker">

    <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="" />
    <script src=""></script>
    <script src=""></script>
    <script src="app.js"></script>

  <body ng-controller="MainCtrl">
    <tags-input class="bootstrap"
                placeholder="Add a movie"
      <auto-complete source="loadMovies($query)"
    <p>Model: {{movies}}</p>

    "The Dark Knight",
    "The Dark Knight Rises",
    "Kill Bill: Vol. 1",
    "Terminator 2: Judgment Day",
    "The Matrix",
    "Minority Report",
    "The Bourne Ultimatum",
    "Kill Bill: Vol. 2",
    "Hot Fuzz",
    "The Fugitive",
    "Casino Royale",
    "Ghost Dog: The Way of the Samurai",
    "Mission: Impossible",
    "Die Hard",
    "Die Hard: With a Vengeance",
    "The Matrix Reloaded",
    "The Terminator",
    "True Lies",
    "Sherlock Holmes",
    "Enemy of the State",
    "V for Vendetta",
    "Mission: Impossible II",
    "16 Blocks",
    "Live Free or Die Hard",
    "Batman Begins",
    "Mission: Impossible - Ghost Protocol",
    "Spy Game",
    "The Score",
    "The Matrix Revolutions",
    "Lethal Weapon 4",
    "The Boondock Saints",
    "Midnight Run",
    "Die Hard 2",
    "In the Line of Fire",
    "Rush Hour",
    "The French Connection",
    "The Bourne Identity",
    "The Bourne Supremacy",
    "First Blood",
    "Fast Five",
    "Mesrine: Killer Instinct",
    "Sherlock Holmes: A Game of Shadows",
    "Mesrine: Public Enemy #1",
    "Beverly Hills Cop",
    "Vantage Point",
    "Lethal Weapon",
    "Get the Gringo",
    "The Rock",
    "Lethal Weapon 2",
    "District B13",
    "The Island",
    "El mariachi",
    "Lethal Weapon 3",
    "Safe House",
    "Con Air",
    "Street Kings",
    "The Rundown",
    "Shoot 'Em Up",
    "Mr. & Mrs. Smith",
    "Death Sentence",
    "Bad Boys II",
    "The Italian Job",
    "Mission: Impossible III",
    "The Expendables",
    "National Treasure",
    "Bad Boys",
    "Terminator 3: Rise of the Machines",
    "Gone in Sixty Seconds",
    "Fast & Furious"
.bootstrap .tags {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

.bootstrap .tags.focused {
  border-color: #66afe9;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);

.bootstrap .tags .tag-item {
  background: #428bca;
  border: 1px solid #357ebd;
  border-radius: 4px;
  color: #fff;

.bootstrap .tags .tag-item.selected {
  background: #d9534f;
  border: 1px solid #d43f3a;
  border-radius: 4px;
  color: #fff;

.bootstrap .tags .tag-item button {
  background: transparent;
  color: #000;
  opacity: .4;

.bootstrap .autocomplete {
  border-radius: 4px;

.bootstrap .autocomplete .suggestion-item.selected {
  color: #262626;
  background-color: #e9e9e9;

.bootstrap .autocomplete .suggestion-item em {
  font-weight: normal;
  background-color: #ffff00;

.bootstrap .autocomplete .suggestion-item.selected em {
  color: #262626;
  background-color: #ffff00;