Display xeditable editable form inside popup

Question

Need to wrap the editable form inside a bootstrap uib-popover-template.

Have tried the editable ui-bootstrap popover approach, but it is not working as expected.

Plunker 1 --> https://plnkr.co/edit/vXeVoFYVU2IU08CF angular-bootstrap approach - Not able show/hide the form

Plunker 2 --> https://plnkr.co/edit/upUFeEeQbxs8VfF5?preview x-editable approach - Not able wrap it inside the popover

<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>  

Answer 1

I have edited your first plunkr: https://plnkr.co/edit/QNKoOd7rZzAiIRJf

You need to pass the id of your template as a string to the bootstrap popover directive:

  uib-popover-template="'myPopoverTemplate.html'"

I also removed this from your code:

ng-show="editableForm.$visible"

I am assuming you want to show the popover on click.