How to use a $Scope variable within ng-class

Question

I have the following code:

<a ng-class="{'text-{{color}}-6': menu == '#background'}" href="#background">
   My Menu
</a:

It works, at first it adds the text-red-6 class to the element. But when I change the color of the $scope, the ng-class does not change the class.

Answer 1

I managed using ternary operator in the class attribute :

class="{{menu == '#background' ? 'text-' + color + '-6' : ''}}"

Answer 2

Try it this way:

<div ng-class="{'{{class}}': menu == '#background'}">

...

$scope.color = 'red';
$scope.class = 'text-' + color + '-6';