title: Creating elements Dynamically in Angular
body: <p>I have very little javascript experience. I need to add a menu on click of an item. We have been asked to build it from scratch without using any library like bootstrap compoments or JQuery.</p>
  
  <p>We are using Angularjs. In angular I want to know the correct method to create new elements. Something like what we did not <code>document.createElement</code>.</p>
  
  <p>I am adding some of the code for you guys to have a better idea what I want to do.</p>
  
  <p>Menu Directive</p>
  
  <pre><code>.directive('menu', ["$location","menuData", function factory(location, menuData) {
      return {
          templateUrl: "partials/menu.html",
          controller: function ($scope, $location, $document) {
              $scope.init = function (menu) {
                  console.log("init() called");
                  console.log("$document: " + $document);
  
                  if (menu.selected) {
                      $scope.tabSelected(menu);
                  }
              }
              $scope.creteMenu = function(menuContent){
                  //This is to be called when the action is an array.
              }
              $scope.tabSelected = function(menu){
                  $location.url(menu.action);
                  $scope.selected = menu;
              }
              $scope.click = function (menu) {
                  if (typeof (menu.action) == 'string') {
                      $scope.tabSelected(menu);
                  }
              }
          },
          link: function (scope, element, attrs) {
              scope.menuData = menuData;
          }
      };
  }])
  </code></pre>
  
  <p>Menu data in service.</p>
  
  <pre><code>.value('menuData', [{ label: 'Process-IDC', action: [] }, { label: 'Dash Board', action: '/dashboard', selected: true }, { label: 'All Jobs', action: '/alljobs', selected: false }, { label: 'My Jobs', action: '/myjobs', selected: false }, { label: 'Admin', action: '/admin', selected: false }, { label: 'Reports', action: '/reports', selected: false }]);
  </code></pre>
  
  <p>If you notice the action of Process-IDC menu is an array it will contain more menu with actions in it and it should be opened in a sub menu.</p>
  
  <p>Menu.html (partial)</p>
  
  <pre><code>&lt;ul class="menu"&gt;
      &lt;li ng-class="{activeMenu: menu==selected}" ng-init="init(menu)" data-ng-click="click(menu)" data-ng-repeat="menu in menuData"&gt;{{menu.label}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>