Angular: Empty Fiddle

http://angularjs.org/

HTML

<script type="text/ng-template" id="template.html">
    {{showGrouped}}
    <button ng-click="clicker()">ClickMe!</button>
</script>


<div>
    <chart type="typeOne" show-grouped="false"></chart>
    <chart type="typeTwo" show-grouped="true"></chart>
    <chart type="typeThree" show-grouped="'string'"></chart>
</div>

CSS

div > chart {
    height: auto;
    width: 300px;
    background: #fff;
    margin: 10px;
    display: block;
    border: 1px solid #000;
}
chart > button {
    display: block;
    background: #fff;
    border: 1px solid #000;
}
}

JavaScript

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

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

app.directive('chart', ['$controller', 'chartTypes', function ($controller, chartTypes) {
    return {
        restrict: 'E',
        templateUrl: 'template.html',
        scope: {
            showGrouped: '='
        },
        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();
    };
});