Inserting Tooltips onto existing text

HTML

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<body ng-app="myApp">

    <div ng-controller="MyCtrl">

        <h3>Basic tooltip:</h3>
        <p>Hello World check out my <a href="#" tooltip-placement="top" tooltip="basic tooltip">foo</a> bar app.</p>

        <h3>NgBindHtml-inserted tooltip:</h3>
        <p ng-bind-html="contentStrBind"></p>

        <h3>Filter-inserted tooltip:</h3>
        <p ng-bind-html="contentStr | annotate:key"></p>

        <h3>Target Markup (what I'm ultimately trying to do):</h3>
        <p id="targetParagraph">Hello World check out my foo bar app.</p>

    </div>

</body>

JavaScript

angular.module('myApp', ['ngSanitize','ui.bootstrap'])

    .controller('MyCtrl', function ($scope,$sce,annotateFilter) {

        var targetElem = angular.element(document.querySelector('#targetParagraph'));
        var contentFiltered = annotateFilter(targetElem.html(),'foo');
        targetElem.html(contentFiltered);

        $scope.contentStr = 'Hello World check out my foo bar app';

        $scope.contentStrBind = $sce.trustAsHtml('Hello World check out my <a href="#" tooltip-placement="top" tooltip="tooltip via ng-bind-html">foo</a> bar app.');

        $scope.key = 'foo';
    })

    .filter('annotate', function ($sce) {
        return function (text, search) {
            text = text.toString();
            search = search.toString();
            return $sce.trustAsHtml(text.replace(new RegExp(search,'gi'), '<a href="#" tooltip-placement="top" tooltip="tooltip via filter">$&</a>'));
        };
    });