title: Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding
body: <p>I am using <a href="http://angular-ui.github.io/bootstrap/">angular-ui-bootstrap</a> in my current project, and I have a requirement for a popover that will allow the user to take some action on a given element (rename/edit/delete/etc...). Since angular-ui's bootstrap popover doesn't allow for custom html or data-binding by default, I have copied their tooltip/popover <code>.provider</code> and <code>.directive</code> in an effort to customize it to my needs. </p>
  
  <p><strong>Main Problem</strong>: The ng-click bindings are being lost after the popup is closed and re-opened.</p>
  
  <p><strong>Secondary Problem</strong>: Can two-way data-binding be setup so that I don't have to manually set <code>scope.$parent.$parent.item</code>?</p>
  
  <p><strong>Plunker</strong>: <a href="http://plnkr.co/edit/HP7lZt?p=preview">http://plnkr.co/edit/HP7lZt?p=preview</a></p>
  
  <p><br>
  <em>To give glance of what changes were made to the original <code>tooltip.js</code>:</em>   </p>
  
  <ul>
  <li>The popover <code>.directive</code> is what has been modified the most:</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>.directive('iantooltipPopup', function () {
      return {
        restrict: 'E',
        replace: true,
        scope: { mediaid: '@', title: '=', content: '@', placement: '@', animation: '&amp;', isOpen: '&amp;' },
        templateUrl: 'popover.html',
        link: function (scope, element, attrs) {
          scope.showForm = false;
  
          scope.onRenameClick = function () {
            console.log('onRenameClick()');
            scope.showForm = true;
          };
  
          scope.onDoneClick = function () {
            console.log('Title was changed to: ' + scope.title);
            scope.showForm = false;
            scope.$parent.$parent.item.title = scope.title;
            scope.$parent.hide();
          };
        }
      };
    })
  </code></pre>
  
  <ul>
  <li>The tooltip <code>.provider</code> was only changed here, in an effort to get two-way binding to work on the <code>title</code> field :</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>var template = 
    '&lt;'+ directiveName +'-popup '+
      // removed
      // 'title="'+startSym+'tt_title'+endSym+'" '+
      'title="tt_title" ' +
      'content="'+startSym+'tt_content'+endSym+'" '+
      'placement="'+startSym+'tt_placement'+endSym+'" '+
      'animation="tt_animation()" '+
      'is-open="tt_isOpen"'+
      '&gt;'+
    '&lt;/'+ directiveName +'-popup&gt;';
  </code></pre>
  
  <p>I appreciate any help, I feel the compiled directives and providers seem to be large mental hurdles when getting started with Angular. I've been trying figure out and manipulate this directive so I can learn from it, just as much as actually needing the component itself.</p>