Dynamically parsing HTML with AngularJS - angularjs

Question

I'm new to Angular and I have hit a small problem. I would like to set different menus depending on the user being authenticated or not. Depending on the status laravel returns different menu structures (html).
Here's my HTML for the main menu:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="MenuCtrl">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="/image">
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ng-bind-html="firstoption" ng-class="{active:isActive('/firstoption')}">{{ firstoption }}</li>
<li ng-bind-html="secondoption" ng-class="{active:isActive('/secondoption')}" class="dropdown">
{{ secondoption }}
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Heres my Controller:
The backend returns a json with the html. The reason why I want to do it like that has also to do with user rights. Depending on different rights, different options are shown in the menu.
AppControllers.controller('MenuCtrl', ['$scope', '$http', '$sce', '$location',
function ($scope, $http, $sce, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
$scope.firstoption = "";
$scope.secondoption = "";
var getMenuStructure = $http.get('/menustructure').success(function (data) {
$scope.firstoption = $sce.trustAsHtml(data.firstoption);
$scope.secondoption = $sce.trustAsHtml(data.secondoption);
});
}]);
It seems to work nearly perfectly, but the console still gives me an error:
TypeError: Object [object Object] has no method 'indexOf'
Is there a more elegant way of doing it? What am I doing wrong?
UPDATE
The problem seems to be the $sce.trustAsHtml();. When I remove it, the dropdowns don't work anymore and when I add them I get the error.

Answer 1

The ng-include allows you to include data from an external URL and compile it on the fly.
This will allow you to write code like this:
<ng-include src="/views/{{viewname}}.html"></ng-include>
and then in your controller, simply set (or change) the view by setting $scope.viewname, like so:
$scope.viewname = "view"
Even if you don't need to dynamically change which page is loaded, it's worth using the ng-include for simplicities sake.

Answer 2

I ran into this same problem. I found that $sce.getTrusted worked the same as trustAsHtml for my case. It looks like this: $sce.getTrusted($sce.HTML, someHtml)