JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
  <div ng-controller="NewsController">
    example person: <my-person myname="Joe" id="1"></my-person>
    <h2>
      News
    </h2>
    <div ng-repeat="newsEntry in news">
			<span class="row"  bind-html-compile="newsEntry.text"></span>
    </div>
  </div>
</div>

JavaScript

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

app.controller('NewsController', function($scope) {
  $scope.news = [];
  $scope.news.push({text: 'I met <my-person myname="cyril" 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_name: '@myname',
			person_id : '=id'		
    },
    controller: function($scope) {
      $scope.person = {id: $scope.person_id, name: $scope.person_name};
    },
  };
});
app.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);