javascript - AngularJS append html to dom element -

im working on small web app, , there side menu has nav links in it. each link when clicked pulls out hidden panel , should display list of items specific link.

i have of functionality working except im stuck on how append either templateurl or html panel.

any guidance great.

heres have far: html

<!-- pullout menu -->  <nav id="sidebar-pullout">    <div id="menu-list"></div> </nav> 

app.js

var configapp = angular.module("configapp", ['ngroute','ui.bootstrap'])  .config(function($routeprovider){    $routeprovider..when('/organizations', {         templateurl: 'templates/dashboard/organizations/organizations-title.html',         controller: 'organizationcontroller',         activetab: 'organizations'     })       .otherwise( {redirectto: '/dashboard'} );   });  // side nav link controllers    configapp.controller('organizationcontroller', function($scope) {});    configapp.controller('sidenavctrl', function($scope, $location) {   $scope.isactive = function(route) {     return route === $location.path();   }  });   // adding html menu-list  configapp.directive('menu-list', function(){   return {     template: '<span ng-transclude >append som html here</span>',     replace: true,     transclude: true,     controller: 'organizationcontroller'   };  }); 

here way might able go it. keeping reference menu items , contents. keep side panel content in separate html files.

configapp.directive('menulist', function() {   return {     restrict: 'ea',     link: function(scope, el, attr) {          var activeid = null;          scope.showcontent = function(id) {             activeid = id;         };          scope.isactive = function(id) {             return activeid === id;         }          scope.menuitems = [{             id: 'item1',             name: 'menu item 1',             content: 'path/to/menuitem1content.html'         }, {             id: 'item2',             name: 'menu item 2',             content: 'path/to/menuitem2content.html'         }]     }   }; });  

then in html maybe this.

<div menulist>   <nav id="sidebar-menu">     <ul>         <li ng-repeat="item in menuitems">             <a ng-click="showcontent(item.id)">{{ item.name }}</a>         </li>     </ul>   </nav>    <div id="sidebar-content">     <div class="content"          ng-repeat="item in menuitems"          ng-include="item.content"          ng-show="isactive(item.id)"></div>   </div>  </div> 

this idea , use angular animation animate sidebar sliding , stuff.