javascript - ポップアップ内に xeditable 編集可能なフォームを表示する

Question

編集可能なフォームをブートストラップ uib-popover-template 内にラップする必要があります。

編集可能な ui-bootstrap ポップオーバー アプローチを試しましたが、期待どおりに機能しません。

プランカー 1 --> https://plnkr.co/edit/vXeVoFYVU2IU08CF angular-bootstrap アプローチ - フォームを表示/非表示にできません

Plunker 2 --> https://plnkr.co/edit/upUFeEeQbxs8VfF5?preview x-editable アプローチ - ポップオーバー内にラップできません

<div class="ui-popover-wrapper">
  <a href="#" editable-text="user.name" 
    ng-click="editableForm.$show()">{{user.name || 'empty' }}</a>
</div>

   <form editable-form name="editableForm" onaftersave="saveUser()" ng-show="editableForm.$visible">
    <div>
      <span class="title">DDown1: </span>
      <span editable-select="user.status" e-name="status" e-ng-options="s.value as s.text for s in statuses">
        {{ (statuses | filter:{value: user.status})[0].text || 'Not set' }}
      </span>
    </div>  

    
    <div>
      <!-- editable username (text with validation) -->
      <span class="title">DropDown Date: </span>
      <span editable-date="user.date" onbeforesave="checkDate($data)"
      >{{ (user.date | date: "yyyy-MM-dd") || 'empty' }}</span>
    </div> 
    
    <div>
      <!-- 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>
    </div>
  </form>