JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.6/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.js"></script>
<ui-select id="person" ng-model="person.selected" theme="bootstrap" uiselect-on-tab="onUiSelectTab(value)">
                    <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.country}} - {{$select.selected.name}}</ui-select-match>
                    <ui-select-choices repeat="item in people | filter: $select.search">
                        <div ng-bind-html="item.name | highlight: $select.search"></div>
                        <small ng-bind-html="item.email | highlight: $select.search"></small>
                    </ui-select-choices>
                </ui-select>
                <p>{{person.selected}}</p>

<input type="text" id="next" class="form-control">
<br>
<br>
<p ng-show="helptext">Click here to see the selected value display
</p>
</p>

JavaScript

app = angular.module("selectui", ["ngSanitize", "ui.select"]);

    app.controller("SelectUIController", SelectUIController);
    
    function  SelectUIController ($scope, $timeout){
    
    $scope.person = {};
    $scope.helptext= false;
    $scope.people = [];
    $scope.onUiSelectTab = function(value) {
    console.log(value)
    $scope.person.selected ={ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' };
    document.getElementById("next").focus();
    $timeout(function(){
    $scope.helptext = true;
    })
    
    }
    
    }
    

 app.directive('uiselectOnTab', uiselectOnTab);

    function uiselectOnTab($parse, $timeout) {
        return {
            require: 'uiSelect',
            scope: false,
            link: function(scope, element, attribute) {
                element.bind('keydown', function(event) {
                    var onTabPressHandler = $parse(attribute.uiselectOnTab);
                    var value = '',
                        props = null;
                    //  element.find('input.ui-select-search') //not working why?
                    angular.forEach(element.find('input'), function(input) {
                        if (angular.element(input).hasClass('ui-select-search'))
                            value = angular.element(input).val();
                    });
                    if ((event.which === 9 || event.code == 'Tab' || event.keyCode === 9) && value) {
                        event.preventDefault();
                        event.stopPropagation();
                        try {
                            props = JSON.parse(attribute.props);
                        } catch (e) {}
                        onTabPressHandler(scope, { value: { search: value, props: props } });
                    }
                })
            }
        }
    }