Angular, ng-repeat to build other directives

Angular, ng-repeat to build other directives

I'm building a complex layout, that takes a JSON document and then formats
it into multiple rows, with each row then having more rows and/or
combinations of rows/columns inside them.
I'm new to Angular and am just trying to get to grips with Directives.
They are easy to use for very simple things, but quickly become very
difficult once you need to anything more complicated.
I guess I'm doing this the wrong way around, but is there a way to simply
add the name of a directive (in the example below, I've used ) and get
that directive to be rendered on an ng-repeat?
Maybe the same way that you can use {{{html}}} instead of {{html}} inside
of mustache to get a partial to render as HTML and not text.
As expected, the example below simply writes the name of the directive
into the dom. I need Angluar to take the name of the directive, understand
it, and then render before before it is written. Due to the complex layout
of the page I need to design, I could be rendering many different
directives, all inside each other, all from 1 JSON document (which has
been structured into different rows and then row / column combinations).
Example code that renders the name of the directive to the page, but gives
you an idea of how I'd like to write a solution the problem...
<div app-pages></div>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script>
var app = angular.module("app", ['main']);
angular.module('main', [])
.controller("appPageController", ['$scope', function( $scope ){
$scope.pages = [];
var page1 = {
title: 'Page 1',
directive: '<app-page-type-1>'
};
var page2 = {
title: 'Page 2',
directive: '<app-page-type-2>'
};
$scope.pages.push(page1);
$scope.pages.push(page2);
}])
.directive("appPageType2", function factory() {
console.log('into page type 2');
return {
replace: true,
template: 'This is the second page type'
};
})
.directive("appPageType1", function factory() {
console.log('into page type 1');
return {
replace: true,
template: 'This is the first page type'
};
})
.directive("appPages", function factory() {
console.log('into pages');
return {
replace: true,
template: '<ul><li ng-repeat="page in
pages">{{page.directive}}</li></ul>'
};
});
</script>