Q:

How can I get my directive to run after and operate on ng-bind-html content?

Suppose I want to make a directive called addHello that adds the element <span>hello!</span> to the following paragraph <p><span>I say</span> </p>. Here's a Plunk:
HTML
<p ng-bind-html="whatIsay" addHello></p>

AngularJS
app.controller('MainCtrl', function($scope, $sce) {
  $scope.whatIsay = $sce.trustAsHtml('<span>I say </span>')
})

app.directive('addHello', function() {
  return {
    link: function(scope, element) {
      element.append(angular.element('<span>hello!</span>'))
    }
  }
})

The end result should be <p><span>I say</span> <span>hello!</span></p>
Basically, I want ng-bind-html to do its work, then I want my directive addHello to run after it.

A:

If you don't want to use the $timeout hack, you can do away with ng-bind-html and add a parameter to your directive, like so:
<body ng-controller="MainCtrl">
   <p add-hello="whatIsay"></p>
</body>

And here's the directive code:
app.directive('addHello', function() {
    return {
        scope: {
            trustedHtml: "=addHello",
        },
        link: function(scope, element) {
            element.append("<p>hello</p>" + scope.trustedHtml.toString() + "<p>goodbye</p>");               
        }
    };
});

And here's the plunker.

