JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<h4>Angular-xeditable Editable form (Bootstrap 3)</h4>

<div ng-app="app" ng-controller="Ctrl">
    <form editable-form name="editableForm" onaftersave="saveUser()">
        <div>
            <!-- editable username (text with validation) --> <span class="title">Name: </span>
 <span editable-text="user.name" e-ng-model="user.name" e-name="name" e-required>{{ user.name || 'empty' }}</span>

        </div>
        <div> <span class="title">State: </span>
 <span editable-text="user.state" e-name="state" e-form="editableForm" e-typeahead="state as state.state for state in states" e-typeahead-editable="false" e-typeahead-on-select='onSelectProductFromDictionary($item, $model, editableForm)'>
     {{ getState(user.state.state) }}
        </span>

            <div>
                <!-- button to show form -->
                <button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">Edit</button>
                <!-- buttons to submit / cancel form --> <span ng-show="editableForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
          Cancel
        </button>
      </span>

                <br>{{user}}</div>
    </form>
</div>

CSS

div[ng-app] {
    margin: 10px;
}
form[name="editableForm"] > div {
    height: auto;
    padding: 5px 0;
}
form[name="editableForm"] .title {
    display: inline-block;
    font-weight: bold;
    padding-top: 5px;
    vertical-align: top;
    min-width: 90px;
}
form[name="editableForm"] .editable {
    display: inline-block;
    padding-top: 5px;
    vertical-align: top;
}
form[name="editableForm"] select {
    width: 120px;
}

JavaScript

var app = angular.module("app", ["xeditable", "ui.bootstrap"]);

app.run(function (editableOptions) {
    editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function ($scope, $filter, $http) {
    $scope.user = {
        id: 1,
        state: 'Alaska'
    };

    $scope.states = [{
        "state": 'Alabama',
            "name": "John"
    }, {
        "state": 'Alaska',
            "name": "Michael"
    }, {
        "state": 'Teksas',
            "name": "Jimmy"
    }];


    $scope.onSelectProductFromDictionary = function ($item, $model, form) {

        angular.forEach(form.$editables, function (editable) {
            if (editable.name === 'state') {
                return;
            }
            editable.scope.$data = $model.name; // this is a dictionary model
            editable.save(); // move the value from edit input to view xeditable value
            editable.hide(); // hide the specific xeditable input if you needs
        });

    };

    $scope.getState = function (name) {
        var selected = $filter('filter')($scope.states, {
            state: name
        });
        return (selected.length) ? selected[0].state : '---';
    };


    $scope.saveUser = function () {
    };
});