angularjs - How to set multiply rules with and without expression in ng-class directive? -

i'm trying use directive called ng-class set multiply rules css file. here part of code

<div class="filtertogglebtn thumbnail"          ng-class="{ filtertogglebtnside notificationcolor:notificationstate }"> </div> 

variables filtertogglebtnside , notificationcolor contains string names of css rules.

variable notificationstate sets true or false.

the point of question - how can use filtertogglebtnside rule , , notificationcolor notificationstate true.

i trying make code below

<div class="filtertogglebtn thumbnail"          ng-class="{ filtertogglebtnside && notificationcolor:notificationstate }"> </div>  <div class="filtertogglebtn thumbnail"          ng-class="{ filtertogglebtnside, notificationcolor:notificationstate }"> </div>  <div class="filtertogglebtn thumbnail"          ng-class="{ filtertogglebtnside:true, notificationcolor:notificationstate }"> </div> 

in last sample second expression working. appreciated if ;d thanks

assuming

$scope.filtertogglebtnside = "class1"; $scope.notificationcolor = "class2"; 

you can this:

<div class="filtertogglebtn thumbnail class1"  ng-class="{class2:notificationstate }"></div> <!-- or --> <div class="filtertogglebtn thumbnail"  ng-class="{class1: true, class2: notificationstate}"></div> <!-- or --> <div class="filtertogglebtn thumbnail class1 {{notificationstate && notificationcolor}}"></div> <!-- or --> <div class="filtertogglebtn thumbnail class1 {{notificationstate && 'class2'}}"></div> <!-- or --> <div class="filtertogglebtn thumbnail  {{filtertogglebtnside}} {{notificationstate && notificationcolor}}"></div> <!-- or --> <div class="filtertogglebtn thumbnail  {{filtertogglebtnside}} {{notificationstate && 'class2'}}"></div>