<div class="foo-dropdown {{fooOptions.customClass}}">

    <ui-select ng-if="!fooOptions.allowMultiple"
               ng-model="fooModel"
               ng-disabled="fooOptions.readonly"
               on-select="triggerCallback(fooModel)"
               theme="bootstrap" title="{{fooOptions.placeholderText ? fooOptions.placeholderText : 'Choose'}}">

        <ui-select-match placeholder="Select or search for {{fooOptions.placeholderText}}">{{<span class="katex math inline">select.selected[fooOptions.valueField] ||</span>select.selected}}</ui-select-match>

        <ui-select-choices repeat="option in fooOptions.dataSource | filter: $select.search track by $index"
                           refresh="{{fooOptions.remoteFilter ? 'refreshDropdownList($select.search)' : '' }}"
                           minimum-input-length= "{{fooOptions.minimumSearchLength ? fooOptions.minimumSearchLength : 1 }}"
                           refresh-delay="{{fooOptions.remoteFilterDelay ? fooOption.remoteFilterDelay : 0}}">
            <div id="{{option[fooOptions.idField]}}">{{option[fooOptions.valueField]}}</div>
        </ui-select-choices>

    </ui-select>

    <ui-select ng-if="fooOptions.allowMultiple"
               multiple
               ng-model="fooModel"
               ng-disabled="fooOptions.readonly"
               on-select="triggerCallback(fooModel, $item)"
               on-remove="triggerCallback(fooModel, $item)"
               theme="bootstrap" title="{{fooOptions.placeholderText ? fooOptions.placeholderText : 'Choose'}}">

        <ui-select-match placeholder="Select or search for {{fooOptions.placeholderText}}...">{{$item[fooOptions.valueField]}}</ui-select-match>

        <ui-select-choices repeat="option in fooOptions.dataSource | filter: $select.search track by $index"
                           refresh="{{fooOptions.remoteFilter ? 'refreshDropdownList($select.search)' : '' }}"
                           minimum-input-length= "{{fooOptions.minimumSearchLength ? fooOptions.minimumSearchLength : 1 }}"
                           refresh-delay="{{fooOptions.remoteFilterDelay ? fooOption.remoteFilterDelay : 0}}">
            <div id="{{option[fooOptions.idField]}}">{{option[fooOptions.valueField]}}</div>
        </ui-select-choices>

    </ui-select>

</div>

(function () {
    'use strict';
    angular.module('footheme').directive('fooDropdown', fooDropdownDirective);
    fooDropdownDirective.<span class="katex math inline">inject = ['</span>http'];


    function fooDropdownDirective (<span class="katex math inline">http) {
        var directive = {
            scope: {
                fooModel: '=',
                fooOptions: '='
            },
            restrict: 'AE',
            replace: false,
            templateUrl: 'directives/fooDropdown/templates/dropdown.html',
            link: fooDropdownLink,
            compile: fooDropdownCompile,
            controller: fooDropdownController
        };

        return directive;

        function fooDropdownCompile(ele, attr) {} // end of comiple method

        function fooDropdownLink(scope, ele, attr, ctrl) {
            scope.triggerCallback = function(){

            }
        } // end of link method

        function fooDropdownController(</span>scope) {

            init();
            <span class="katex math inline">scope.refreshDropdownList = refreshDropdownList;</span>scope.triggerCallback = triggerCallback;

            function init () {
                console.log('name', <span class="katex math inline">scope.fooModel, ' options: ',</span>scope.fooOptions);

                <span class="katex math inline">scope.fooOptions.idField = _.isEmpty(</span>scope.fooOptions.idField) ? 'id' : <span class="katex math inline">scope.fooOptions.idField;</span>scope.fooOptions.valueField = _.isEmpty(<span class="katex math inline">scope.fooOptions.valueField) ? 'value' :</span>scope.fooOptions.valueField;

                setOptions();
            }

            function setOptions() {
                <span class="katex math inline">scope.fooOptions.dataSource = !_.isEmpty(</span>scope.fooOptions.dataSource) ? <span class="katex math inline">scope.fooOptions.dataSource : [];

                if (_.isEmpty(</span>scope.fooOptions.remoteDataSource)) {
                    <span class="katex math inline">scope.fooOptions.dataSource = prepareOptionsList(</span>scope.fooOptions.dataSource);

                } else {
                    <span class="katex math inline">http.get(</span>scope.fooOptions.remoteDataSource).then(function (responseObj) {
                        <span class="katex math inline">scope.fooOptions.dataSource = prepareOptionsList(responseObj);
                    });
                }
            }

            function prepareOptionsList(</span>listObj) {

                var optionsList = [], arr = [];
                if (_.hasIn(<span class="katex math inline">listObj, 'data')) {
                    optionsList =</span>listObj.data;
                    if (_.hasIn(optionsList, 'data')) {
                        optionsList = optionsList.data;
                    }
                }else{
                    optionsList = <span class="katex math inline">listObj;
                }

                _.forEach(optionsList, function (option, key) {
                    arr.push( _.isObject(option) ? option : {id: key, text: option} );
                });

                return arr;
            }


            function refreshDropdownList(searchString) {
                console.log('searchString: ', searchString);
                if (_.isEmpty(</span>scope.fooOptions.remoteDataSource)) {
                    console.log('Oops! No remoteDataSource defined to remote filter');
                    return false;
                }
                <span class="katex math inline">http.get(</span>scope.fooOptions.remoteDataSource + '?searchQuery=' + searchString).then(function (responseObj) {
                    <span class="katex math inline">scope.fooOptions.dataSource = prepareOptionsList(responseObj);
                });
            }

            function triggerCallback(fooModel, item) {</span>scope.fooModel =  fooModel; // otherwise its not updating.
                <span class="katex math inline">scope.fooOptions.onSelect &&</span>scope.fooOptions.onSelect( $scope.fooModel, item);
            }
        }// end of controller
    }// end of directive
}());

<foo-dropdown foo-model="FIELD_NAME" foo-options="FIELD_CONFIG_OBJECT"></foo-dropdown>
<!-- OTHER CODE -->

<span class="katex math inline">scope.FIELD_NAME = {"code":"WA","name":"Washington","country":"USA"};</span>scope.config = {
    placeholderText: 'FILED_NAME_PLACEHOLDER_TEXT',
    customClass: 'PASS_YOUR_OWN_CUSTOM_CLASS',
    readOnly: false,
    disabled: true,
    allowMultiple: true,
    onSelect: PASS_A_CALLBACK_METHOD,
    dataSource: PASS_ARRAY_OF_OBJECT_AS_OPTIONS,
    idField: 'DEFINE_ID_FIELD_FOR_SELECT',
    valueField: 'DEFINE_VALUE_FIELD_FOR_SELECT',
    remoteDataSource: 'DEFINE_REMOTE_URL_FOR_OPTIONS',
    remoteFilter: 'DEFINE_REMOTE_FILTER_TRUE_FALSE',
    remoteFilterDelay: 'DEFINE_REMOTE_FILTER_DELAY',
}