Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

HTML

<div ng-app='demo' ng-controller="MyCtrl">
    <button-directive ng-click="increment()" counter="{{count}}"></button-directive>
    <button-directive ng-click="increment()" counter="{{count}}"></button-directive>
    <button-directive ng-click="increment1()" counter="{{count1}}"></button-directive>
</div>

JavaScript

var demo = angular.module('demo', []);
demo.directive('buttonDirective', function($parse) {
    
    return {
        restrict: 'E',        
        scope: {
            counter: '@'
        },
        template: '<button>{{counter}}</button>',
    }
});

demo.controller('MyCtrl', ['$scope', function($scope){
    $scope.count = 0;
    $scope.increment = function(){
        $scope.count = $scope.count + 1;
    };
    
    $scope.count1 = 0;
    $scope.increment1 = function(){
        $scope.count1 = $scope.count1 + 1;
    };
}]);