JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="http://code.angularjs.org/1.0.8/angular-mocks.js"></script>
<h4>Angular-xeditable Validate remote (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
  <a href="#" editable-text="user.name" onbeforesave="checkName($data)">
    {{ user.name || 'empty' }}
  </a>
</div>

CSS

div[ng-app] { margin: 50px; }

JavaScript

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

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

app.controller('Ctrl', function($scope, $q, $http) {
  $scope.user = {
    name: 'awesome user'
  };

  $scope.checkName = function(data) {
    var d = $q.defer();
    $http.post('/checkName', {value: data}).success(function(res) {
      res = res || {};
      if(res.status === 'ok') { // {status: "ok"}
        d.resolve()
      } else { // {status: "error", msg: "Username should be `awesome`!"}
        d.resolve(res.msg)
      }
    }).error(function(e) {
      d.reject('Server error!');
    });
    return d.promise;
  };
});

// mock `/checkName` request
app.run(function($httpBackend) {
  $httpBackend.whenPOST(/\/checkName/).respond(function(method, url, data) {
    data = angular.fromJson(data);
    if(data.value !== 'awesome') {
      return [200, {status: 'error', msg: 'Username should be `awesome`'}]; 
    } else {
      return [200, {status: 'ok'}]; 
    }
  });
});