Custom Directives 1

HTML

<script src="//code.angularjs.org/1.3.0/angular.js"></script>
<body ng-app="myShop">
    <div ng-controller="ShoppingCartController">
        <shopping-cart item="item" increase="increase()"></shopping-cart>
         <shopping-cart item="item2" increase="increase()"></shopping-cart>
    </div>
</body>

JavaScript

angular.module('myShop', [])
    .controller('ShoppingCartController', ['$scope', function ($scope) {
    $scope.item = {
        article: 'PS4',
        number: 0
    };
            $scope.item2 = {
        article: 'XBox',
        number: 0
    };
    $scope.increase = function () {
        $scope.item.number++;
    }
}])
    .directive('shoppingCart', function () {
    return {
        restrict: 'E',
        scope: {
            item: '=',
            increase: '&'
        },
        template: '<div>Article: {{item.article}} Number: {{item.number}}</div>' +
            '<button ng-click="increase()">Increase number</button>'
    };
});