How to dynamically include controller from string for directives? - angularjs

Question

I need to dynamically choose the controller at ngRepeat based on component name as a string. Plunker: http://plnkr.co/edit/osLLf0c4eNCpNokyyXCI?p=preview
As you can see I found a solution, but I don't think this is an Angular way, because I've created a stack of controllers and assign them to "controllers" variable outside the angular scope.
Here is HTML:
<table border="1" class="item" data-ng-repeat="component in components">
<tr>
<td>
<div component="component"></div>
</td>
</tr>
</table>
Javascript
var app = angular.module("sortableApp", []);
app.controller("appCtrl", ["$scope", function($scope) {
$scope.components = [{
name: 'simpleText',
tpl: 'simple-text.html',
content: 'Simple text'
}, {
name: 'heading',
tpl: 'heading.html',
content: 'Heading'
}];
}]);
app.directive("component", ["$templateCache", "$compile", function($templateCache, $compile) {
return {
restrict: "A",
scope: {
component: "="
},
controller: function($scope) {
if(controllers[$scope.component.name]) {
return controllers[$scope.component.name]($scope);
}
},
link: function(scope, element, attrs) {},
template: '<div ng-include="component.tpl"></div>'
}
}]);
var controllers = {
simpleText: function($scope) {
$scope.add = function() {
alert('add text');
}
},
heading: function($scope) {
$scope.add = function() {
alert('add heading');
}
}
}
How to achieve my goal in angular way? thanks for your answer!