title: Angular js Nesting custom directives
body: <p>I want to use something like nesting with custom directives in angular js. Could anyone explain me with simple solution ? </p>
  
  <p>example code is below is not working for me : </p>
  
  <pre><code>&lt;outer&gt;
      &lt;inner&gt;&lt;/inner&gt;
  &lt;/outer&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var app = angular.module('app',[]);
  app.directive('outer',function(){
      return{
          restrict:'E',
          template:'&lt;div&gt;&lt;h1&gt;i am a outer&lt;/h1&gt;&lt;/div&gt;',
          compile : function(elem,attr){
              return function(scope,elem,att,outercontrol){
                  outercontrol.addItem(1);
              }
          },
          controller : function($scope){
              this.addItem = function(val){
                  console.log(val);
              }
          }
      }
  });
  
  app.directive('inner',function(){
      return{
          require : 'outer',
          template : '&lt;div&gt;&lt;h1&gt;i am a inner&lt;/h1&gt;&lt;/div&gt;',
          link:function(scope,elem,attr){
  
          }
      }
  });
  </code></pre>