JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="MyCtrl">

    <div>
        <input ng-form type="text" ng-model="$parent.search" append-me terms="myTerms">
    </div>
    {{search}}

</div>

JavaScript

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

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

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