<div class="field row dropdown"
	 ng-if="field.fieldOptions.length > 0">
    <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
	    <h3>
			<small class="field-number">
				{{index+1}}
				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
			</small>
	    	{{field.title}}
	    	<span class="required-error" ng-show="!field.required">{{ 'OPTIONAL' | translate }}</span>
	    </h3>
		<p class="col-xs-12">
			<small>{{field.description}}</small>
		</p>
    </div>
    <div class="col-xs-12 field-input">
		<ui-select ng-model="field.fieldValue"
                theme="selectize"
			    search-enabled="true"
			    search-by="option_value"
			    set-search-to-answer="true"
				ng-required="field.required"
				ng-disabled="field.disabled"
			    on-tab-and-shift-key="prevField()"
			    on-tab-key="nextField()"
				ng-change="$root.nextField()">
			<ui-select-match placeholder="{{ 'TYPE_OR_SELECT_OPTION' | translate }}">
			</ui-select-match>
			<ui-select-choices repeat="option in field.fieldOptions | filter: $select.search"
							   ng-class="{'active': option.option_value === field.fieldValue }">
				<span ng-bind-html="option.option_value | highlight: $select.search"></span>
			</ui-select-choices>
        </ui-select>
    </div>
</div>
<br>
