title: Angular chain directives/ generate html from constant
body: <p>I am trying to chain to directives together in angular.  What I am trying to do is generate the following html in a directive.</p>
  
  <pre><code>&lt;div id="menu-brunch" class="tab-pane"&gt;
      &lt;div ng-init="init('brunch');" ng-controller="controllers.MenuController"&gt;
          &lt;div ng-repeat="item in menuItems"&gt;
              &lt;h3&gt;{{item.name}}&lt;/h3&gt;
              &lt;p&gt;{{item.description}}&lt;/p&gt;
              &lt;menuitems model="item.items" &gt;&lt;/menuitems&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Menu items is working, but no matter what I try I can't create a "double" directive.  The goal is to create another directive <code>menu</code> that will output the HTML above, e.g.:</p>
  
  <pre><code>&lt;menu model='brunch'&gt;
  </code></pre>
  
  <p>What I tried:</p>
  
  <pre><code>angular.module('leanwxApp.directives', []).
  directive('menu', ()-&gt;
        template : "
              &lt;div id='tab-{{model}}' class='tab-pane'&gt;
  &lt;div ng-init=\"init('{{model}}');\" ng-controller='MenuController'&gt;
                          &lt;div ng-repeat='item in menuItems'&gt;
                              &lt;h3&gt;{{item.name}}&lt;/h3&gt;
                              &lt;p&gt;{{item.description}}&lt;/p&gt;
                              &lt;menuitems model='item.items' &gt;&lt;/menuitems&gt;
                          &lt;/div&gt;
              &lt;/div&gt;
        ",
        restrict: 'E',
        replace: true,
        scope : {
          'model' : '=model'
        },
    ).directive('menuitems', ()-&gt;
        template : "
                    &lt;ul class='media-list'&gt;
                      &lt;li ng-repeat=\"item in model\"&gt;
                          &lt;div class='pull-right'&gt;{{item.price}}&lt;/div&gt;
                          &lt;div class=\"media-body\"&gt;
                            &lt;h4 class=\"media-heading\"&gt;{{item.name}}&lt;/h4&gt;
                            &lt;p ng-bind-html-unsafe=\"item.description\"&gt;&lt;/p&gt;
                           &lt;/div&gt; 
                      &lt;/li&gt;
                  &lt;/ul&gt;
        ",
        restrict: 'E',
        replace: true,
        scope : {
          'model' : '=model'
        },
    );
  </code></pre>
  
  <p>But it just produces nothing... suggestions ?  And as a side note, my "MenuController" performs a JSON request with whatever <code>init('&lt;category&gt;')</code> is set with.  e.g. <code>/menu/&lt;category&gt;.json</code> .    Fiddle showing the problem <a href="http://jsfiddle.net/ncapito/ALWQe/" rel="nofollow">http://jsfiddle.net/ncapito/ALWQe/</a></p>