Tengo un objeto devuelto en el siguiente formato:

[
    {
        "category": "Coach",
        "phrase_original": "Training {{the team}} to develop their match skills by ensuring they are comfortable with {{defence techniques}}",
        "phrase_filter": "Training {{group}} to develop their {{attribute}} skills by ensuring they are comfortable with {{factor}}"
    },
    {
        "category": "Coach",
        "phrase_original": "Assisting the {{fitness coach}} in strength and conditioning work to improve {{team performance}}",
        "phrase_filter": "Assisting the {{person}} in strength and conditioning work to improve {{factor}}"
    }
]

Me gustaría analizar cada uno y reemplazar:

{{group}} enphrase_filter con<span style="group*button">group</span>{{attribute}} enphrase_filter con<span style="attribute-button">group</span>{{factor}} enphrase_filter con<span style="factor-button">group</span>{{person}} enphrase_filter con<span style="person-button">person</span>

¿Cuál sería la mejor manera de lograr esto?

Este es mi código hasta ahora, no estoy seguro de si implementar lo anterior. Actualmente estoy obteniendo los datos del punto final de la API, pero aún no estoy seguro de cómo procesarlos.

CategoryService.getCategoryDetail($scope.categoryId).then(function(dataResponse) {
  $scope.categoryDetail = dataResponse.data;
  angular.forEach($scope.categoryDetail, function(e) {
    // 1. find all the words in braces in phrase_filter
    // 2. replace them with html markup so they are rendered in the view differently   
    // e.phrase_filter = ???
  });
});