asp.net mvc - Generate Menu Html and bind div from Angularjs and mvc -

i generating html menu string xml in mvc controller , in angularjs passing response div $("#divid").html(response).

its working fine menus have sub menus open class not calling not showing submenus

please tell doing wrong.

in angular, never use $() outside directive (and use angular.element() instead ... anyway don't need 99% of time) if want dynamically add html angular template use ng-bind-html property.

in controller

$scope.mymenu = response; 

in html

<div ng-bind-html="response"></div> 

you'll run case angular don't trust html. you'll have use angular services angular html should trust (if proper source).

here topic on how make angular trust html

hope helped.

edit

here working plunker of proposition

looks first problem try write html controller, wich bad thing.

instead should try generate js object 1 :

$scope.mymenu = [{   name:"adminitstration",   url:"/administration", },{   name: "my dashboard",   url:"/mydashboard",   submenus: [{     name:"activity dashboard",     url:"/activity",   }] },{   name: "profiles",   url:"/profiles",   submenus: [{     name:"accounts",     url:"/accounts",   }] }] 

and use angular templating render html according theses

<ul>   <li ng-click="menu.submenusshow = !menu.submenusshow" ng-repeat="menu in mymenu">     <a href="{{menu.submenus.length ? '#' : menu.url}}">{{menu.name}}</a>     <ul ng-show="menu.submenusshow">       <li  ng-repeat="submenu in menu.submenus">         <a href="{{menu.url+submenu.url}}">{{submenu.name}}</a>       </li>     </ul>   </li> </ul>