JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
    <div ng-controller="AppCtrl">
        <div ng-repeat="item in items">
            <div item="item">
                <button ng-click="trigger(item)">Trigger</button>
            </div>
            <p>triggers: {{item.triggers}}, catches: {{item.catches}}</p>
        </div>
    </div>
</div>

JavaScript

angular.module("MyApp", [])

.factory('ItemsModel', function() {
    var item1 = { triggers: 0, catches: 0 };
    var item2 = { triggers: 0, catches: 0 };
    var item3 = { triggers: 0, catches: 0 };
    
    return {
        getItems: function() { 
            return [item1, item2, item3, item1];
        }
    };
})

.controller('AppCtrl', function($scope, ItemsModel) {
    $scope.items = ItemsModel.getItems();    
})

.controller('ItemCtrl', function($scope) {
    $scope.trigger = function(item) {
        item.triggers++;
    };    
    $scope.$watch('item.triggers', function(newValue, oldValue) {
        if(newValue != oldValue)
            $scope.item.catches++;
    });
})

.directive('item', function() {
    return {
        scope: {
            item: "="
        },
        controller: 'ItemCtrl'
    };
});