Dynamic population of angular permissions

Question

This is my html code

<li ng-class="{active: collapseVar == menu.Id}" ng-repeat="menu in side_menu"
                  permission-only="{{menu.permission}}" permission>
    <a style="color:#FFFFFF; background-color:#00BCD4" ng-click="check(menu.Id)">
        <i class="fa {{menu.icon}} fa-2x" style="margin-right:5px;"></i>{{menu.name}} 
        <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level" collapse="collapseVar!=menu.Id">
        <li ui-sref-active="active" ng-repeat="sub_menu in menu.sub_views">
            <a style="color:#FFFFFF; background-color:#59C8D7" ui-sref="{{sub_menu.state}}">
               {{sub_menu.name}}
            </a>
        </li>
    </ul>
</li>

I need to populate permissions dynamically But i am getting this error

angular.js:14525 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{menu.permission}}] starting at [{menu.permission}}]. http://errors.angularjs.org/1.6.4/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bmenu.permission%7D%7D&p4=%7Bmenu.permission%7D%7D at angular.js:66 at AST.throwError (angular.js:15090) at AST.object (angular.js:15079) at AST.primary (angular.js:14968) at AST.unary (angular.js:14956) at AST.multiplicative (angular.js:14943) at AST.additive (angular.js:14934) at AST.relational (angular.js:14925) at AST.equality (angular.js:14916) at AST.logicalAND (angular.js:14908)

Answer 1

please try passing without using parentheses {{}}

<li ng-class="{active: collapseVar == menu.Id}" ng-repeat="menu in side_menu"
                  permission-only="menu.permission" permission>

case permission-only accept argument ( only: '=?permissionOnly') from documentation. https://github.com/Narzerus/angular-permission/blob/master/src/permission/directives/permission.js