title: Dynamic menu bar with angularjs
body: <p>I'm trying to create a menu bar using <code>Angularjs</code>. I've done similar things before with <code>Backbonejs</code>, but I have a hard time getting my head around how to do this with angular.</p>
  
  <p>In my <code>html</code> file, I have the following menu placeholder.</p>
  
  <pre><code>&lt;div id='menu1'&gt;&lt;/div&gt;
  &lt;div id='menu2'&gt;&lt;/div&gt;
  &lt;div id='menu3'&gt;&lt;/div&gt;
  &lt;div id='menu4'&gt;&lt;/div&gt;
  &lt;div id='menu5'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>A number of my angular modules add a menu when they are loaded (in <code>run</code>). Each of them only reserves a particular slot (i.e. <code>menu1..5</code>), so they don't clash. When some modules aren't loaded, their menu would not show in the menu bar.</p>
  
  <p>An angular module would conceptually look like:</p>
  
  <pre><code>angular.module('myModule3', [])
    .service('someService', function($http) {
      // get some data to populate menu (use $http)
      this.menuItems = ['orange', 'apple', 'banana']
    })
  
    .run(['someService', function(someService) {
      // create a rendered menu item
      ...
      // insert it at id="menu3"
    })
  </code></pre>
  
  <p>For sake of simplicity, the rendered menu item should look like:</p>
  
  <pre><code>  &lt;ul&gt;
      &lt;li&gt;organge&lt;/li&gt;
      &lt;li&gt;apple&lt;/li&gt;
      &lt;li&gt;banana&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>I'm fairly new to angular, so I don't really know where to begin. I've been reading up on <code>directive</code>s, but don't see how they fit in here, as they require some custom markup (maybe a custom menu tag containing the DOM target (i.e. <code>menu..5</code>). Also, how to connect this to a controller is not clear to me.</p>
  
  <p><strong>Update</strong>
  In addition to the above <code>base template</code> (containing arbitrary anchor points in the DOM) and the directive (which will produce a DOM element which will be inserted at these anchor points), a template will facilitate the creation of the DOM element. This template will be located in a separate file containing the position the directive's DOM element will be inserted to (as opposed to the usual case of directives in which an already existing tag will be replaced/inserted into specific markup that matches the directive's definition:</p>
  
  <pre><code>&lt;menu ng-model="Model3DataService" target="#menu3"&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="for item in items"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/menu&gt;
  </code></pre>
  
  <p>Again, coming from a Backbone/jquery background this makes sense, but this may not be the right thing to do in angular. If so, please let me know how I could keep the base template free of any knowledge about the modules and assumptions of where they put their menu (i.e. which slot of the menu bar they allocate). I'm happy to hear about other solutions...</p>