Angular: Empty Fiddle

http://angularjs.org/

HTML

<div>
    <chart type="typeOne" ng-click="clicker()"></chart>
    <chart type="typeTwo" ng-click="clicker()"></chart>
    <chart type="typeThree" ng-click="clicker()"></chart>
</div>

CSS

div * {
    height: 20px;
    width: 20px;
    background: #000;
    margin: 10px;
    display: block;
}

JavaScript

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

app.constant('chartTypes', ['typeOne', 'typeTwo', 'typeThree']);

app.directive('chart', ['$controller', 'chartTypes', function ($controller, chartTypes) {
    return {
        restrict: 'E',
        scope: true,
        controller: function ($scope, $element, $attrs) {
            if (chartTypes.indexOf($attrs.type) === -1) {
                throw new Error('Chart with type ' + $attrs.type + ' is not currently supported.');
            } else {
                return $controller($attrs.type + 'Controller', {
                    $scope: $scope,
                    $attrs: $attrs
                });
            }
        },
        link: function (scope, el, attrs, controller) {
            controller.init();
        }
    };
}]);

app.controller('typeOneController', function ($scope, $attrs) {
    var ctrl = this;

    ctrl.init = function () {
        console.log('typeOneController', arguments);
    };

    $scope.clicker = function () {
        console.log('clickety click');
    };
});

app.controller('typeTwoController', function ($scope, $attrs) {
    var ctrl = this;

    ctrl.init = function () {
        console.error('typeTwoController', $attrs);
    };

    $scope.clicker = function () {
        throw new Error('Whatcha doin?');
    };
});

app.controller('typeThreeController', function ($scope, $attrs) {
    var ctrl = this;

    ctrl.init = function () {
        console.log('wawawiwa', $scope);
    };

    $scope.clicker = function () {
        ctrl.init();
    };
});