What pattern to use for different AngularJS directives in an ng-repeat based on dynamic data

What pattern to use for different AngularJS directives in an ng-repeat
based on dynamic data

I'm building a dashboard dynamically from an array of data. The gauges are
D3.
I have a selection of different D3 gauges defined in AngularJS directives.
On my page I have an ng-repeat iterating over the metrics array.
The question I have is what is the best way to dynamically select the
right directive based on an attribute of data in the ng-repeat array?
Is there a way to create a factory pattern where the Directive used is
based on an input value from the array? Or is there a way to achieve the
result using only Directives by dynamically including other Directives in
a Directive?
HTML
<div ng-controller="DashboardCtrl">
<div id="oppChart">
<div>
<gh-visualization ng-repeat="item in metrics"
val="item[0]"></gh-visualization>
</div>
</div>
</div>
Metrics array (will be dynamic):
$scope.list = [
{ 'title': 'XYX','data-type':'', 'query':'SELECT ...' },
{ 'title': 'Revenue', 'data-type':'', 'query':'SELECT ...' }
];
D3 Directive based on this - http://briantford.com/blog/angular-d3.html