JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp" ng-controller="ctrl">

<greeter person-name="Jim" greeting-template="Hello {{name}}"></greeter>

</div>

JavaScript

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

myapp
	.controller('ctrl', controller)
	.directive('greeter', greeter);

function controller($scope) {
	$scope.name = 'ParentScopeName';
}

function greeter($interpolate) {
  var directive = {
  	compile: compile,
    restrict: 'EA',
    template: '<div>{{evaluatedTemplate}}</div>'
  };
	return directive;

	function compile(tElement, tAttrs) {

		// save the uninterpolated template for use in our post-link function
    var greetingTemplateUninterpolated = tAttrs.greetingTemplate;

		return {
     	pre: function (scope, element, attrs) {
      },
      post: function (scope, element, attrs) {
        scope.name = attrs.personName;
        scope.evaluatedTemplate = $interpolate(greetingTemplateUninterpolated)(scope);
      }
    };
  }  
}