Angularjs UI bootstrap popover having difficulty with rendering HTML
<p>I have an AngularJS (v1.4.7) directive that uses AngularJS-UI (v0.14.3).</p>

<p>Inside the directive, I have a popover that works if I only use <code>uib-tooltip</code>, e.g.:</p>

<pre><code>...
directiveContent += '&lt;span uib-popover="Some normal text"&gt;Popover!&lt;/span&gt;';
...
</code></pre>

<p>The directive's popover fails once I switch this to <code>uib-tooltip-html</code>:</p>

<pre><code>...
directiveContent += '&lt;span uib-popover-html="Some &lt;b&gt;bold&lt;/b&gt; text!"&gt;Popover!&lt;/span&gt;';
...
</code></pre>

<p>The parse error that comes up relates to the <code>link:</code> part of directive, wherein I watch if the content of the directive changes, and I then re-compile the contents:</p>

<pre><code>scope.$watch('content', function(value) {
    var span = angular.element(element.find('span')[1]);
    span.html(value);
    $compile(span)(scope);  // &lt;--- SOME ERROR OCCURS HERE
});
</code></pre>

<p>I compile in order to bind elements to event handlers.</p>

<p>Here is the specific <code>$parse</code> error:</p>

<pre><code>angular.js:12477 Error: [$parse:syntax] http://errors.angularjs.org/1.4.7/$parse/syntax?p0=%2F&amp;p1=not%20a%20primary…expression&amp;p2=14&amp;p3=Some%20%3Cb%3Ebold%3C%2Fb%3E%20text!&amp;p4=%2Fb%3E%20text!
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:6:416
at Object.s.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:209:339)
at Object.s.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:206:337)
at Object.s.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:205:503)
at Object.s.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:205:249)
at Object.s.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:205:76)
at Object.s.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:205:19)
at Object.s.equality (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:204:241)
at Object.s.logicalAND (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:204:94)
at Object.s.logicalOR (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:203:458)
at Object.s.ternary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:203:253)
at Object.s.assignment (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:203:107) &lt;span popover-append-to-body="true" popover-animation="true" uib-popover-html="Some &lt;b&gt;(anonymous function) @ angular.js:12477(anonymous function) @ angular.js:9246aa @ angular.js:8791K @ angular.js:8289g @ angular.js:7680g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684(anonymous function) @ angular.js:7555(anonymous function) @ my-directive.js:57n.$digest @ angular.js:15826n.$apply @ angular.js:16097h @ angular.js:10546K @ angular.js:10744e @ angular.js:10695E @ angular.js:10734e @ angular.js:5507(anonymous function) @ angular.js:5784
</code></pre>

<p>How could I go about fixing this?</p>