angularjs - Angular directive from array element in ngRepeat -

i working on project have number of html cards, , format , positioning of cards same, content of them differ.

my plan implement content of each card angular directive, , using ngrepeat, loop through array of directives can in order, displaying each directive in card. this:

inside controller:

$scope.cards = [     'directice-one',     'directive-two',     //etc.. ] 

my directive:

.directive('directiveone', function () {     return {         restrict: "c",         template: '<h1>one!!</h1>'     }; })  .directive('directivetwo', function () {     return {         restrict: "c",         template: '<h1>two!!</h1>'     }; })  //etc.. 

my html:

<div class="card" ng-repeat="item in cards">     <div class="{{item}}"></div> </div> 

but.. directives don't render. div class="directive-one".

this might design flaw on part, sort of syntax error, or limitation of angular. i'm not sure.

i've considered making directive <card>, , passing templateurl: it, cause me lose access $scope , javsacript capabilities have if each card it's own directive.

so, advise, code help, helpful!

i choose directives when need use them in html mark up. example, assuming cards layout same , takes different information based on user preference.

html file

<my-card name="first" option="myoptions"></card> <my-card name="second" option="genoptions"></card> 

directive

angular.module("testapp").directive("mycard", function() { scope: {  name: '@',  option: '@'  controller: "mycardcontroller",  templateurl: "~/mycard/mycardtemplate.html" } }); 

in template can implement information passed html page via directive.

hope helps.

do take note above approach preferred when developing framework sort of things. example develop web framework , header takes 5 parameters , these 5 parameters needs passed via mark up. important thing framework/header independent