JSFiddle - React, Tailwind, and code Playground

by Ali Adravi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.min.js"></script>
<div lang="en" ng-app="myApp">   
    <div class='container' ng-controller="stageController">
        <form name="myForm" novalidate>
          <h1>ngTagsInput</h1>
          <tags-input ng-model="tags" class='tags-input' parentId="101", typeId = "30" modify-selection>
            <auto-complete source="loadTags($query) | filter:$query:startsWith"
                load-on-focus='true'
                load-on-focus='true'
                min-length='1'>
            </auto-complete>
          </tags-input>
          <br>
          <pre>{{tags | json}}</pre>
         
        </form>        
    </div>

</div>

JavaScript

'use strict';

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

/* Controllers */
app.controller('stageController',['$scope', function($scope){
 $scope.tags = [];
    $scope.loadTags = function(query){
        return ["Algeria", "Argentina","Australia", "Belgium", "Bosnia and Herzegovina",
                "Brazil","Cameroon", "Chile", "Colombia", "Costa Rica", "Croatia", "Ecuador", 
                "England", "France", "Germany", "Ghana", "Greece", "Honduras", "Iran", 
                "Italy", "Ivory Coast","Japan", "Mexico", "Netherlands","Nigeria", "Portugal", 
                "Russia", "South Korea", "Spain", "Switzerland","United States", "Uruguay"];
    }
 
     $scope.startsWith = function(state, query) {
      	return state.substr(0, query.length).toLowerCase() == query.toLowerCase();
    } 
}]) ;

/*app.directive("modifySelection", function(){
	return{
    	 require: 'ngModel',
         link: function (scope, elm, attrs, ctrl) {
         debugger
         	var parentId = scope.$eval(attrs.parentId) || 0,
                typsId = scope.$eval(attrs.typeId) 
         }
    }
})*/