Зависимости

в данном случае создается полностью новый модуль, который передается в другой модуль как зависимость

directive.js 

angular.module("additionalModule", [])
 
.directive("triButton", function () {
    return {
        scope: { counter: "=counter" },
        link: function (scope, element, attrs) {
            element.on("click", function (event) {
                console.log("Button click: " + event.target.innerText);
                scope.$apply(function () {
                    scope.counter++;;
                });
            });
        }
    }
});

index.html 

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>Services and modules</title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />      
    <script src="directive.js"></script>
    <!--файл с модулем от которого зависит модуль studyModule следует поключить до создания этого модуля иначе будет ошибка-->
    <script>
        angular.module("studyModule", ["additionalModule"])
        .controller("studyCtrl", function ($scope) {
            $scope.data = {
                cities: ["London", "New York", "Paris"],
                totalClicks: 0
            };
            $scope.$watch('data.totalClicks', function (newVal) {
                console.log("Total click count: " + newVal);
            });
        });
    </script>    
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <div class="btn-group" tri-button counter="data.totalClicks" source="data.cities">
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total clicks: {{data.totalClicks}}</h5>
    </div>
</body>
</html>