Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo'>
    <button-directive label="Phaulo"></button-directive>
    <button-directive label="Teste"></button-directive>
</div>

JavaScript

var demo = angular.module('demo', []);
demo.directive('buttonDirective', function() {
    return {
        restrict: 'E',
        template: '<button ng-controller="MyCtrl" ng-click="increment()">{{label}}: {{count}}</button>',
        
        scope: {
        	label: '@'
        }
    };
});

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