JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="MyCtrl">


<input type="text" ng-model="search" append-me terms="myTerms">


</div>

JavaScript

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

myApp.directive('appendMe', [function($compile) {
    return {
        restrict: 'A',
        scope: {terms: '='},
        compile: function(tElement) {
            tElement.after(
                '<p>test</p>' + 
                '<ul><li ng-repeat="term in terms">{{term}}</li></ul>' +
                '<p>hm…</p>'
            );
            return function(scope, element, attributes) { // linking function
                console.log(scope.terms);
            }
        }
    }
}]);

function MyCtrl($scope) {
    $scope.search = 'Superhero';
    $scope.myTerms = ['Superman','Spider-man','Batman'];
}