JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyController">
    <div ng-repeat="item in ctrl.products"> 
        <add-to-cart item="item.name"></add-to-cart>  
    </div>
</div>

JavaScript

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

    myApp.directive('addToCart', addToCart);
    
    function MyController($scope){
    	$scope.ctrl = {
        	products : [
                {name : "one"},
                {name : "two"}
            ]
        }
    }
    
    function addToCart() {
        var directive = {
            link: link,
            scope: {
                'item': '='
            },
            transclude: true,
            template: '<div>{{item}}<button ng-click="addItem()">+</button></div>',
            restrict: 'EA',
            controller: AddToCartController
           
        };

        return directive;

        function link(scope, element, attrs, ctrl) {
        }
       

        function AddToCartController($scope) {
            $scope.addItem = function () {
                alert($scope.item);
            };
           
        }
    }