JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<h2>Document's sections</h2>

<div class="form-row document-nodes" ng-app="DocumentNodesApp">
  <div ng-controller="NodeController" on-node-click="getNodeTitle($event)">        
    <div id="node-container">
        <div class="node"><span class="node-title">Section 1</span><a href="#" class="node-edit">(edit)</a></div>
        <div class="node"><span class="node-title">Section 2</span><a href="#" class="node-edit">(edit)</a></div>
        <div class="node"><span class="node-title">Section 3</span><a href="#" class="node-edit">(edit)</a></div>        
    </div>
  </div>
</div>

CSS

.node-title {
    cursor: pointer;
}
.node-edit {
    margin-left: 10px;
}

JavaScript

angular.module('DocumentNodesApp',[])
.directive('onNodeClick', ['$parse', function ($parse) {
    
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var scopeExpresssion = attrs.onNodeClick; // gets string 'getNodeTitle($event)' from element attribute            
            var invoker = $parse(scopeExpresssion); // compile string into a function
            
            element.on('click', '.node', function (e) {
                // wrap the function invocation in scope.$apply() so
                // angular knows about it
                scope.$apply(
                    function () {
                        invoker(scope, { $event: e });
                    }
                );
            });
        }
    };
}])

.controller('NodeController', ['$scope', function ($scope) {
    $scope.getNodeTitle = function (e){
        console.log(e);
    };  
}]);