angularjs - Angular chain directives/ generate html from constant -

i trying chain directives in angular. trying generate following html in directive.

<div id="menu-brunch" class="tab-pane">     <div ng-init="init('brunch');" ng-controller="controllers.menucontroller">         <div ng-repeat="item in menuitems">             <h3>{{item.name}}</h3>             <p>{{item.description}}</p>             <menuitems model="item.items" ></menuitems>          </div>      </div> </div> 

menu items working, no matter try can't create "double" directive. goal create directive menu output html above, e.g.:

<menu model='brunch'> 

what tried:

angular.module('leanwxapp.directives', []). directive('menu', ()->       template : "             <div id='tab-{{model}}' class='tab-pane'> <div ng-init=\"init('{{model}}');\" ng-controller='menucontroller'>                         <div ng-repeat='item in menuitems'>                             <h3>{{item.name}}</h3>                             <p>{{item.description}}</p>                             <menuitems model='item.items' ></menuitems>                         </div>             </div>       ",       restrict: 'e',       replace: true,       scope : {         'model' : '=model'       },   ).directive('menuitems', ()->       template : "                   <ul class='media-list'>                     <li ng-repeat=\"item in model\">                         <div class='pull-right'>{{item.price}}</div>                         <div class=\"media-body\">                           <h4 class=\"media-heading\">{{item.name}}</h4>                           <p ng-bind-html-unsafe=\"item.description\"></p>                          </div>                      </li>                 </ul>       ",       restrict: 'e',       replace: true,       scope : {         'model' : '=model'       },   ); 

but produces nothing... suggestions ? , side note, "menucontroller" performs json request whatever init('<category>') set with. e.g. /menu/<category>.json . fiddle showing problem http://jsfiddle.net/ncapito/alwqe/

here's working example of you're looking for:

http://jsfiddle.net/alwqe/5/

html

<div ng-app="test" ng-controller="menucontroller">     <menu which="brunch"></menu>     <menu which="lunch"></menu>     <menu which="dinner"></menu> </div> 

javascript

var app = angular.module('test', []);  app.factory('testxxx', function () {     return {         test: function() { alert('load data here'); }     }; });  app.directive('menu', function () {     return {         restrict: 'e',         template: '<div id="menu-{{which}}" class="tab-pane">' +         '    <div>' +             '        <div ng-repeat="item in menu.items">' +             '            <h3>{{menu.name}}</h3>' +             '            <p>{{menu.description}}</p>' +             '            <menuitems model="menu.items" ></menuitems>' +             '         </div>' +             '     </div>' +             '</div>',         replace: true,         scope: {             which: '@'         },         controller: function ($scope, testxxx) {             testxxx.test();             $scope.$watch('which', function (which) {                 $scope.menu = {                     'name': + ' menu',                         'description': + ' description',                     items: [{                         'name': + ' item',                             'description': + ' item description',                             'price': '1.99'                     }]                 };             });         }     }; });  app.directive('menuitems', function () {     return {         template: "<ul class='media-list'><li ng-repeat=\"item in model\">                      <div class='pull-right'>{{item.price}}</div><div class=\"media-body\">                        <h4 class=\"media-heading\">{{item.name}}</h4><p ng-bind-html-unsafe=\"item.description\"></p></div></li></ul>",         restrict: 'e',         replace: true,         scope: {             'model': '=model'         }     }; });  app.controller('menucontroller', function ($scope) {     $scope.loadmenu = function (which) {      };       $scope.menuitems = {         'name': 'test',             'description': 'description',         items: [{             'name': 'test 1',                 'description': 'item description',                 'price': '1.99'         }, {             'name': 'test 2',                 'description': 'item description',                 'price': '2.99'         }]     }; }); 

the fiddle provided had issues. might better describe goal instead of describing you're trying angularjs framework. don't think it's idea directive load data server (my assumption based on reading question over), without better understanding of you're going for, can't give better advice that.

here's rundown of things wrong approach:

1. you don't want specify ng-controller in directive's template (your menu directive has ng-controller="menucontroller"). tightly coupling directive controller (something don't want do) , it's causing angular instantiate twice. directive's can have own controllers, , should used in situation this.
2. you've got <menu model="test"> telling angular property called test in $scope, doesn't exist. i'm not entirely sure you're going here, again, can't advise on what's best without making assumptions.
3. finally, they're not hurting anything, don't need return statements in menucontroller , $scope.init. javascript functions can "sub" routines without return.