title: Angular replace part of unsafe text with link
body: <p>My api returns an array of events (json) with the following property:</p>
  
  <pre><code>event.text
  </code></pre>
  
  <p>The text property contains a string based on user input, for example companyName, I want to list the text in a ng-repeat loop with a clickable link to the company. (the event.text could be "Dave added a new company Philips" where Philips and Dave are values from a database)</p>
  
  <p>Because the companyname can have html tags that are unsafe e.g. </p>
  
  <pre><code>&lt;a href="somenastyurl"&gt;dangerouscompany&lt;/a&gt;
  </code></pre>
  
  <p>angular sanitizes the strings.</p>
  
  <p>However some links should be shown in the front-end, to make sure only save links (created by my api) are shown. I decided to add two return values in the api: </p>
  
  <pre><code>event.links 
  event.linknames 
  </code></pre>
  
  <p>event.links contains links (urls to an item, the urls are always safe and not based on user input they use id's) and event.linknames the names that should be shown in the link. for example:</p>
  
  <pre><code>event.links = ["http://example.com/1","http://example.com/2"]
  event.linknames = ["Dave","Philips"]
  </code></pre>
  
  <p>Ive edited event.text to contain tags like [0] to be replaced with links, a tag [0] should be replaced with a link to event.links[0] with the name of event.linksnames[0].
  To replace the tags I made the following code (in my controller after the events are loaded).</p>
  
  <pre><code>angular.forEach($scope.events, function (value, key) {
  
      var arrayLength = value.links.length;
      for (var i = 0; i &lt; arrayLength; i++) {
          value.Text = value.Text.replace("[" + i + "]", '&lt;a ng-href"' + value.links[i] + '"&gt;' + value.linkNames[i]+'&lt;/a&gt;');
      }
  });
  </code></pre>
  
  <p>in my view :</p>
  
  <pre><code> &lt;div ng-repeat="e in events"&gt;
        &lt;span &gt;{{e.Text}} &lt;/span&gt;&lt;br /&gt;
  &lt;/div 
  </code></pre>
  
  <p>The tag [0],[1] are replaced but the text is still sanitized and in the view the html tags are shown:</p>
  
  <pre><code> &lt;a ng-href"http://example.com/1"&gt;Dave&lt;/a&gt; added a new company &lt;a ng-href"http://example.com/2"&gt;Philips&lt;/a&gt;
  </code></pre>
  
  <p>instead of the desired result:</p>
  
  <pre><code> Dave added a new company Philips
  </code></pre>
  
  <p>where dave and philips are clickable links.</p>
  
  <p><em>Notes: I know the user could name his company my[0]company but the link would still be safe. Im using angular 1.6.4</em></p>
  
  <p>How can I make the replaced parts clickable and keep the non replaced part sanitized?</p>