Generating a Table from a Directive - angularjs

Question

I have been trying to figure out how to generate a table using a directive and an array of data. Basically I want to be able to structure my html like this:
<div ng-init="myData = [name: 'John', age: 22]"></div>
<dynamic-table data="myData">
<field title="column 1" class="myClass" expression="{{object.name}}" />
<field title="column 2" class="myClass" expression="{{object.age}}" />
</dynamic-table>
From that html, I want my directive to generate the following HTML:
<table>
<tr>
<th>column 1</th>
<th>column 2</th>
</tr>
<tr>
<th>John</th>
<th>22</th>
</tr>
</table>
The problem is that I need the expression {{object.name}} to be evaluated inside the directive rather than prior to begin passed in to the directive. I have a jsfiddle here demonstrating the problem. I would also be interested to hear about any other ways to accomplish this. I've tried it using the compile directive function but eventually you run into the same thing with the expression. Of course, I could do this using ng-repeats, but my directive will eventually do more than just this.
Here is the directive from the fiddle:
var appModule = angular.module('app', [])
.directive('dynamicTable', function () {
return {
restrict: 'E',
replace: true,
transclude: true,
template:
'<table>' +
'<tr>' +
'<th ng-repeat="field in fields">{{field.title}}</th> ' +
'</tr>' +
'<tr ng-repeat="object in data" ng-transclude>' +
'<td ng-repeat="field in fields">' +
'{{field.expression}}' +
'</td>' +
'</tr>' +
'</table>',
scope: {
data: '='
},
controller: function ($scope) {
$scope.fields = [];
}
};
}).directive('field', function () {
return {
restrict: 'E',
require: '^dynamicTable',
link: function (scope, element, attrs, controller) {
var exists = false;
for (var idx = 0; idx < scope.fields.length; idx++) {
if (scope.fields[idx].title === attrs.title) {
exists = true;
break;
}
}
if (!exists) {
scope.fields.splice(0, 0, { title: attrs.title, 'class': attrs.class, expression: attrs.expression });
}
}
};
});