javascript - Angular directives not showing in the source HTML -

i have filter turns hashtags links:

app.filter('hashtags', function($filter) {   return function(text, target) {     if (!text) return text;     var replacedtext = text.replace(/#(\w*[a-za-z_]+\w*)/gim, '<a ng-href="/posts?q=%23$1">#$1</a>');     return replacedtext;   }; }); 

however, when displayed on page, hashtag clickable , surrounded in anchor tags, ng-href no found. looks this.

<a>#hashtag</a> 

why angular directive not showing up?

it may worth noting classes show up. if change line read:

var replacedtext = text.replace(/#(\w*[a-za-z_]+\w*)/gim, '<a class="test" ng-href="/posts?q=%23$1">#$1</a>'); 

the output in html be:

<a class="test">#hashtag</a> 

ng-href need pulled out of filter , put template in used.

<div ng-repeat="tag in tags">     <a class="test" ng-href="{{tag | hashtag}}">{{tag}}</a> </div> 

the reason angular doesn't $compile when filtering.

see:

• angularjs + highlight.js (to evaluate string expression in directive)