title: Angular.JS — A Directive, inside a directive, inside a directive, inside a directive. Scope issues
body: <p>I have some issues regarding scope in nested directives. I have two directives: column and nested-menu. Their structure can be something like:</p>
  
  <ul>
  <li>column
  <ul>
  <li>nested-menu</li>
  <li>nested-menu
  <ul>
  <li>nested-menu</li>
  <li>other content</li>
  </ul></li>
  <li>nested-menu</li>
  <li>other content</li>
  </ul></li>
  <li>column
  <ul>
  <li>other content</li>
  </ul></li>
  </ul>
  
  <p>The column has a variable to which all the nested-menu's should react. I have tried to make this work in several ways that I found Googling, such as broadcasting events from the column directive (for some reason, the nested-menu's only saw the event when I broadcasted it from $rootScope), setting a directive controller in column and storing the variable there (I can read it, but I can't $watch it).</p>
  
  <p>It's important that both directives have an isolated scope, as they're supposed to be reusable in several areas, and sometimes even nested in themselves.</p>
  
  <p>I have made a simplified Plnkr of a base structure, that's not working.
  <a href="http://plnkr.co/edit/1GP7SKacO777og8PysNF" rel="nofollow">http://plnkr.co/edit/1GP7SKacO777og8PysNF</a></p>
  
  <p>Thank you!</p>