title: Adding a UI-Bootstrap Element to DOM inside Directive
body: <p>I am new to angular and I am trying to figure out the following problem.  When the user highlights some text, I would like a ui-bootstrap popover to surround the highlighted text.  Since this would manipulate the DOM I think I need to use a directive for this.  I was able to successfully implement a simpler version of this problem here</p>
  
  <pre><code>app.directive('selectOnClick', function ($window) {
      return {
          link: function (scope, element) {
              element.on('click', function () {
  
                  var span = document.createElement("span");
                  span.style.fontWeight = "bold";
                  span.style.color = "green";
  
                  if (window.getSelection) {
                      var sel = window.getSelection();
                      if (sel.rangeCount) {
                          var range = sel.getRangeAt(0).cloneRange();
                          range.surroundContents(span);
                          sel.removeAllRanges();
                          sel.addRange(range);
                      }
                  }
              });
          }
      }
  });  
  </code></pre>
  
  <p>In the above code I am able to surround the highlighted text with a <code>span</code> tag.  However I would like to instead use a ui-bootstrap popover.  I tried replacing the <code>span</code> part with <code>var popover=angular.element("&lt;a href=#' uib-popover='hello' popover-title='hello'&gt;&lt;/a&gt;");</code> but this did not work.  Am I on the right track or would this approach not work with a ui-bootstrap element?</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>Here is my attempt at adding the the popover element</p>
  
  <pre><code>app.directive('selectOnClick', function ($window, $compile) {
      return {
          link: function (scope, element) {
              element.on('click', function () {
  
                  var popover=angular.element("&lt;a href=#' uib-popover='hello' popover-title='hello'&gt;&lt;/a&gt;");
  
                  if (window.getSelection) {
                      var sel = window.getSelection();
                      if (sel.rangeCount) {
                          var range = sel.getRangeAt(0).cloneRange();
                          range.surroundContents($compile(popover));
                          sel.removeAllRanges();
                          sel.addRange(range);
                      }
                  }
              });
          }
      }
  });
  </code></pre>
  
  <p>Unfortunately I am getting the error <code>TypeError: Failed to execute 'surroundContents' on 'Range': parameter 1 is not of type 'Node'.</code> on the line <code>range.surroundContents($compile(popover));</code>  So I suppose <code>$compile(popover)</code> is not the correct type.  Can it be converted to <code>Node</code> type somehow?</p>