JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-init="index=0; classes=['red', 'green', 'blue']" style="background-color: green; width: 100px; height: 100px;" ng-click="process1()" >
        <div style="margin: 50px; background-color: red; width: 50px; height: 50px" ng-click="process2($event)" stop-event></div>
    </div>
</div>

CSS

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

JavaScript

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

app.controller('MainCtrl', function($scope) {
    $scope.process1 = function(){
        alert(1);
    }
    
    $scope.process2 = function(){
        alert(2);
    }
});
app.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    };
 })