angularjs - Angular.js dynamically load directives -

i'm quite new of angular.js development. building walking skeleton in which:

1. the controller of page, defined in routing part, retrieves meta-configuration backend components load page (e.g. {"component1":"directive1", "component2":"directive2"})
2. in view, angular.js renders right directive

in nutshell create repository of different directives related same view selected backend.

the view:

<div class="row"> <div class="{{page.component1}}"> </div> <div class="{{page.component2}}"> </div>  </div> 

the controller:

'use strict';  angular.module('myapp') .controller('patientlistpagectrl', function ($scope, patientlistpage) {   $scope.page   = patientlistpage.getdata();  }); 

the service:

'use strict';  angular.module('myapp') .factory('patientlistpage', function ($resource) {  return $resource('/data/navigation/patientslist.json',{ }, {     getdata: {method:'get', isarray: false} }); }); 

a directive:

'use strict';  angular.module('myapp') .directive('directive1', function() {     return {         restrict: 'aec',         templateurl: '../../templates/directives/patientslist.html',         controller: 'listapazientictrl',         replace: true     } }); 

doing so, component not being displayed in page although tag present.

now, tried class , ng-class, both. in rendered html there's right directive inside class renders void. presume angular.js needs re-traverse dom or re-compute page how it?

thank help

directives cannot "dynamically added" live dom , expected work, because template compiled once. if wish construct template dynamically, can surely that, separately dom , $compile it, bind appropriate scope, , insert dom manually.

inside "dynamic inclusion" directive, can like:

$http(/* ... (load data) */).success(function (data) {     var template = angular.element('<div>')         .attr(data.directive.name, data.directive.value);     $element.empty().append($compile(template)($scope)); });