JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
  <div ng-controller="NewsController">
    example person: <my-person id="1"></my-person>
    <h2>
      News
    </h2>
    <div ng-repeat="newsEntry in news">
      {{newsEntry.text}} 
    </div>
  </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('NewsController', function($scope) {
  $scope.news = [];
  $scope.news.push({text: 'I met <my-person id="42"></my-person> yesterday.'});
});

app.directive('myPerson', function() {
  return {
    restrict: 'E',
    replace: 'true',
    template: '<a href="#/person/{{person.id}}">{{person.name}}</a>',
    scope: {
      person_id : '=id',
    },
    controller: function($scope) {
      $scope.person = {id: $scope.person_id, name: 'John Doe'};
    },
  };
});