Angular-xeditable ui-bootstrap popover

angular-xeditable using ui-bootstrap popover for single or multiple fields for entry

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
   <div class="ui-popover-wrapper">
    <a href="#" editable-text="user.name" e-label="User Name"
       id="simpleText"
       uib-popover-template="'popover.html'"
       popover-is-open="popoverIsOpen"
       popover-class="increase-popover-width"
       popover-append-to-body="true"
       popover-placement="right-top"
       onshow="popoverIsOpen = !popoverIsOpen; displayPopup('simpleText', false)"
       onhide="popoverIsOpen = !popoverIsOpen; hidePopup()">{{ user.name || 'empty' }}</a>
  </div>
  <br/>
    <br/>
    <div class="ui-popover-wrapper">
        <div id="popoverWrapper">
            <a editable-text="user.name" 
               e-form="theForm" 
               e-clickable="true"
               e-label="User Name"
               uib-popover-template="'popover.html'"
               popover-is-open="popoverIsOpen2"
               popover-class="increase-popover-width"
               popover-append-to-body="true"
               popover-placement="right-bottom"
               onshow="popoverIsOpen2 = !popoverIsOpen2; displayPopup('popoverWrapper', true)"
               onhide="popoverIsOpen2 = !popoverIsOpen2; hidePopup()">
                {{ user.name || 'empty' }}
            </a>
            <br/>
            <div ng-show="popoverIsOpen2">
                <a href="#"...

CSS

div[ng-app] { margin: 50px; }
/* ui-bootstrap editable popover */
.ui-popover-wrapper a {
    /* make the link always show up */  
    display: inline !important;
}

.ui-popover-wrapper form {
    display: none !important;
}

.increase-popover-width {
    max-width: 400px;
}

JavaScript

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

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

app.controller('Ctrl', function($scope, $templateCache) {
  $scope.user = {
    name: 'awesome user', 
    address: 'the address'
  };
    
  $scope.displayPopup = function (elementId, aForm) {
      var fieldElement,
          wrapper = angular.element('<div></div>');

      if (!aForm) {
          fieldElement = angular.element(document.querySelector('#' + elementId)).next()
      } else {
          //Need to clone it otherwise the link disappears on click
          fieldElement = angular.element( document.querySelector('#' + elementId)).clone();
          //Need to remove the first "a" editable tag, otherwise the input fields get duplicated
          fieldElement.find("a")[0].remove();
      }

      //Need to make sure element is wrapped in a div, otherwise it might not show up in the popover
      wrapper.append(fieldElement);
      $templateCache.put('popover.html', wrapper[0].outerHTML);
  };
    
  $scope.hidePopup = function () {
      $templateCache.remove('popover.html');
  };
});