<div class="peopleInput input-group filter-group" ng-show="selectedTerms.length > 0">
    <a class="filter btn btn-default" ng-repeat="term in selectedTerms" ng-click="removeFilter(term)">
        {{term.label}}
        <span class="glyphicon glyphicon-remove"></span>
    </a>
</div>
<!-- hiddenInputForValidation that enables the use of ng-required on selected Taxonomies instead of taxonomyFieldInput -->
<input id="hiddenInputForValidation" type="text" style="display:none" ng-required="required" ng-model="selectedTerms[0]" />
<div class="taxonomyFieldInput" style="width: 100%; padding: 0; display: inline-table;" ng-class="{'ng-invalid form-control':(required && (selectedTerms==null || selectedTerms==undefined || selectedTerms.length==0))}">
    <div class="input-group" ng-if="(termSetId != null && termSetId.length > 1)||(fieldName != null && fieldName.length > 1)">
        <input type="text"
               class="form-control"
               autocomplete="off"
               typeahead-on-select="filterSelected($item, $model, $label); selectedTerm = '';"
               ng-model="selectedTerm"
               typeahead="term as term.name for term in termSetList | filter:$viewValue | limitTo:8"
               ng-disabled="(allowOnlyOneTerm == 'true' && selectedTerms.length > 0)"
               placeholder="{{allowOnlyOneTerm == 'true' && selectedTerms.length > 0 ? ('No more terms can be selected' | translate) : (placeholder && placeholder != '' ? placeholder : ('Enter Term' | translate))}}" />
        <span class="input-group-addon" style="cursor:pointer" ng-click="pickTermSet()">
            <i class="glyphicon glyphicon-th-list" title="{{'Pick terms' | translate}}" ></i>
        </span>
    </div>
    <div class="peopleInput" ng-if="(termSetId == null || termSetId.length == 0) && (fieldName == null || fieldName.length == 0)">
        {{'TermSet is not selected for this field.' | translate}}
    </div>
</div>


