title: AngularJS directive to replace tags with an ngClick function
body: <p>I'm currently trying to build a directive that would take posts from a certain service, and then iterate through a 'tags' array, replacing any instances that occur with HTML.</p>
  
  <p>I'm getting a problem where I end up with just an anchor, but the ng-click attribute will not appear.</p>
  
  <p>Here is the code that I have in my directives template:</p>
  
  <pre><code>&lt;div class="caption-box"&gt;
      &lt;span ng-show="post.data.caption.text" ng-bind-html="post.data.caption.text"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in my link function:</p>
  
  <pre><code>for(var i = 0; i &lt; scope.post.data.tags.length; i++){
      var str = scope.post.data.tags[i];
      var html = "&lt;a ng-click='modalHashtag()'&gt;" + scope.post.data.tags[i] + "&lt;/a&gt;"
      scope.post.data.caption.text = scope.post.data.caption.text.replace(str, $sce.trustAsHtml(html));
  }
  </code></pre>
  
  <p>The output I'm expecting is this, where function() is a function within a controller</p>
  
  <pre><code>&lt;a ng-click="function()"&gt;#tag&lt;/a&gt;
  </code></pre>
  
  <p>However all i'm getting is this</p>
  
  <pre><code>&lt;a&gt;#tag&lt;/a&gt;
  </code></pre>
  
  <p>I've also tried using filters to replace the tags with HTML, and whilst it replaced the HTML correctly, the functions attached to each tag never worked upon click.</p>
  
  <p>EDIT: Plunkr <a href="http://plnkr.co/edit/FWyZKn1fvdhvZD58HXug?p=preview" rel="nofollow">http://plnkr.co/edit/FWyZKn1fvdhvZD58HXug?p=preview</a></p>