Horrible hack to get ui-select and angular-xeditable to work together

directive-ui-select.js

// <span editable-ui-select="building.intentedUsageCode" e-name="intentedUsageCode" e-style="width: 100%" onbeforesave="foo($data)">
//   <foo-match>{{$select.selected.code}} {{$select.selected.def}}</foo-match>
//   <foo-choices data="item in $usageCodes | filter:$select.search">
//     <span ng-bind-html="trustAsHtml((item.code | highlight: $select.search))"></span>
//     <span ng-bind-html="trustAsHtml((item.def | highlight: $select.search))"></span>
//   </foo-choices>
//   <abbr title="{{building.intentedUsageCode}}">{{building.intentedUsageCode | def.usage}}</abbr>
// </span>
angular.module('xeditable')
  .directive('editableUiSelect', function(editableDirectiveFactory) {
    var rename = function(tag, el) {
      var attrs = el[0].attributes;
      var newEl = angular.element('<' + tag + '/>');
      newEl.html(el.html());
      for (var i = 0; i < attrs.length; ++i) {
        newEl.attr(attrs.item(i).nodeName, attrs.item(i).nodeValue);
      }
      return newEl;
    };

    var match = null;
    var choices = null;
    var dir = editableDirectiveFactory({
      directiveName: 'editableUiSelect',
      inputTpl: '<ui-select></ui-select>',
      render: function() {
        this.parent.render.call(this);

        this.inputEl.append(rename('match', match));
        this.inputEl.append(rename('choices', choices));
      }
    });
    var linkOrg = dir.link;

    dir.link = function(scope, el, attrs, ctrl) {
      console.log(el);
      var matchEl = el.find('foo-match');
      var choicesEl = el.find('foo-choices');

      match = matchEl.clone();
      choices = choicesEl.clone();

      matchEl.remove();
      choicesEl.remove();

      return linkOrg(scope, el, attrs, ctrl);
    };

    return dir;
  });

hi.
i have a problem.
model value is not updated.
can you help me?
tnx.

I'm still testing, but After Many a cry and some prayers. this modification works for me. got the idea from https://habrahabr.ru/post/277001/

I've added 2 lines to the render function above code

this.inputEl.attr('on-select', 'fooEvent($item)');
this.inputEl.attr('ng-model', '$parent.$data');

var dir = editableDirectiveFactory({ directiveName: 'editableUiSelect', inputTpl: '<ui-select></ui-select>', render: function () { this.parent.render.call(this); this.inputEl.append(rename('ui-select-match', match)); this.inputEl.append(rename('ui-select-choices', choices)); this.inputEl.attr('on-select', 'fooEvent($item)'); this.inputEl.attr('ng-model', '$parent.$data'); } });