JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"></script>
<div ng-app="myApp">
    <sample id="myElement"><item>1</item><item>2</item></sample>
</div>

JavaScript

var myApp=angular.module('myApp',[]);
myApp.directive('sample', function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        template: "<div ng-transclude></div>",
        controller: function ($scope, $element) {
            this.act = function (something) {
               $($element).trigger("click", [something]);
            };
        }
    };
})
.directive('item', function () {
    return {
        restrict: "E",
        require: "^sample",
        transclude: true,
        template: "<a ng-transclude></a>",
        link: function (scope, element, attributes, parentController) {
            element.on("click", function(e) {
                //stop original event to prevent duplication
                e.stopPropagation();
                parentController.act(this.innerHTML);
            });
        }
    }
})

$(document).ready(function(){
    $("body").on("click", '#myElement', function (e, something) {
        alert('clicked: ' + something);
    });
});