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

Question

I am generating html menu string from XML in mvc controller and in angularjs i am passing the response to div like $("#divId").html(response).
Its working fine but some menus have sub menus so the open class is not calling so its not showing the submenus
please tell where i am doing wrong.

Answer 1

In angular, never use $() outside a directive (and generally use angular.element() instead ... But anyway you don't need it 99% of the time)
If you want to dynamically add some HTML into an angular template use the ng-bind-html property.
In your controller
$scope.mymenu = response;
In your html
<div ng-bind-html="response"></div>
You'll probably run into a case that angular don't trust your HTML. You'll have to use some angular services to say angular that your HTML should be trust (if it is a proper source).
Here is a good topic on how to make angular trust your HTML
Hope it helped.
EDIT
Here is a working plunker of this proposition
Looks like the first problem is that you try to write your HTML into the controller, wich is a bad thing.
Instead you should try to generate a JS object like this one :
$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 the angular templating to render an HTML according to theses
<ul>
<li ng-click="menu.submenusShow = !menu.submenusShow" ng-repeat="menu in mymenu">
{{menu.name}}
<ul ng-show="menu.submenusShow">
<li ng-repeat="submenu in menu.submenus">
{{submenu.name}}
</li>
</ul>
</li>
</ul>