ng-tagsInput is not working

 var app = angular.module('plunker', ['ngTagsInput']);
//'ngTagsInput'
app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [];

  $scope.loadTags = function(query) {
    return $http.get('http://localhost/search.php?term='+query);
  };
});

HTML:

<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <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="ng-tags-input.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="app.js"></script> 
  </head>

  <body ng-controller="MainCtrl">

      <div class="container-fluid">
            <div>
                <tags-input ng-model="tags"  >
             <auto-complete source="loadTags($query)"></auto-complete> 
            </tags-input>
            </div>

      </div>



    <p>Model: {{tags}}</p>

  </body>

</html>

This is a sample html code which can show tag based filter bar. But i want to integrate with already implemented another application. That application has it own app , controller defined . The problem is I can't see any changes even after making the changes in the template(The main application uses mustache template ). These are the changes i made.

looking at the JS section i just added ['ngTagsInput'] to app definition

var app = angular.module('staticSelect', ['ui.bootstrap','ngTagsInput']);
app.controller('ExampleController', ['$scope', '$http', '$rootScope','$timeout', function($scope, $http, $rootScope, $timeout) {
                $scope.tags = [];

MY HTML CHANGES:

<div class="container-fluid" >
                        <p>some junk</p>
                        <tags-input ng-model="tags"  >
                                <!--<auto-complete source="loadTags($query)"></auto-complete> -->
                        </tags-input>
                </div>

from my understanding it should atleast show the tag box , but it is not showing.

MY QUESTIONS :

  1. Am i missing something ?
  2. What are the things one should check when doing these kinda work (i am a newbie to UX)

Solution

Be sure that you need to provide display-property="name" or whatever you want to show or HTML template

HTML

<tags-input ng-model="tags" display-property="name" placeholder="Add a tag" replace-spaces-with-dashes="false" >
 <auto-complete source="loadTags($query)"
         min-length="0"
         load-on-focus="true"
         load-on-empty="true"></auto-complete> 
</tags-input>

I don't know all your settings but this example should work for you. Please launch it and compare with your settings:

Demo in Plunker

[Edit]

If its not HTML issue, instead:

$scope.loadTags = function(query) {
  return $http.get('http://localhost/search.php?term='+query);
};

change to:

$scope.loadTags = function($query) {
    return $http.get('http://localhost/search.php?term='+query).then(function(response) {
      return response.data;
    });
  };