将文本内容更改为<a> tag

Question

I have a UI that gives a phone number with the option to change it to one of sever phone numbers in an email, all of which are tags, I am using angular, how can I change the text content to match the value of a given tag? here's my code I hope this is enough if not please let me know and I'll send more.

JS

     $scope.getNums = function(str){
//recognizes the phone numbers           
        var regex=/((\d*)([\s-.\/]?)((\(\d{3}\)?)|(\d{3})?)([\s-.\/]?)(\d{3})([\s-.\/]?)(\d{4}|\d{3})(\d?))/g;
        str=str.replace(/-/g,'');
        str = str.replace(/ /, '')
        var nums = str.match(regex);
        for(var i = 0; i<nums.length; i++){
//hard codes an a tag around each number in the Email
            str = str.replace(nums[i], "<a href=''>"+nums[i]+"</a>")
        }
        return str;
       }

HTML

 <div>
         <button class="btn btn-primary dial" ng-click = "clicked = !clicked">Dial In:</button>
         <p style = "display: inline-block">{{data.phoneDetails.dialIn}}</p>
    </div>

The {{data.phoneDetails.dialIn}} value comes from a fetch request to a database.

 <div ng-if="clicked" id = "emailBody">
       <p ng-if = "data.eventLocation">{{data.eventLocation}}</p>                                         <p>{{HTMLParser(getNums(inspectHTML(data.eventBody)))}}</p>
   </div>