title: Dynamicly added dropdown menu in AngularJS + Bootstrap
body: <p>I'm writing a module that will create a dynamic menu on the fly. How to run a directive after adding new <code>&lt;li&gt;</code> with css class <code>dropdown</code> which is also added by ng-class.<br>
  The code:</p>
  
  <pre><code>angular.module('myapp', ['ui.bootstrap'])
  .factory("menuService", ["$rootScope", function($rootScope) {
      "use strict";
  
      return { 
          menu: function() {
              $rootScope.globalMenu;
          },    
          setMenu: function(menu) {
              $rootScope.globalMenu = menu;
          }
      };
  
  }])
  .controller("MainController", ["$scope", "menuService",
      function($scope, menuService){
  
          menuService.setMenu([{href:"#", label:"Dropdown",
                                  dropdown:[{href:"/edit", label:"Edit"}]},
                               {href:'/', label:'test'}]);
  
          $scope.bodyText = "Some text";
  
  
      }]);
  </code></pre>
  
  <p>This is the code in html</p>
  
  <pre><code>    &lt;ul class="navbar-nav nav navbar-left"&gt;
          &lt;li ng-repeat="menu_element in globalMenu" ng-class="{dropdown: menu_element.dropdown != undefined}"&gt;
              &lt;a ng-href="{{menu_element.href}}" ng-class="{'dropdown-toggle': menu_element.dropdown != undefined}"&gt;
                  {{menu_element.label}}
                  &lt;b class="caret" ng-if="menu_element.dropdown != undefined"&gt;&lt;/b&gt;
              &lt;/a&gt;
              &lt;ul ng-if="menu_element.dropdown != undefined" class="dropdown-menu"&gt;
                  &lt;li ng-repeat="sub_element in $parent.menu_element.dropdown"&gt;
                      &lt;a ng-href="{{sub_element.href}}"&gt;{{sub_element.label}}&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Link to plunker:
  <a href="http://plnkr.co/edit/pgH35mmsjLJqV4yJuSYq?p=preview" rel="nofollow">http://plnkr.co/edit/pgH35mmsjLJqV4yJuSYq?p=preview</a></p>
  
  <p>So what I want to do is the same or similar as for jQuery, there I would run <code>$("li.dropdown").dropdown()</code> after adding whole ul>li blocks. I'm new to Angular and I want to make this in the angular way.</p>
  
  <p>I read about directives, how to use them. But I couldn't find how to apply directive in runtime. I've read about <code>transclude: element</code> in a directive (ui.bootstrap.dropdownToggle) doesn't have it enabled. I'm sure that there is a easy way, but couldn't find it myself...</p>