Estilo ngClass con guión en clave

Espero que esto le ahorre a alguien un dolor de cabeza con los estilos que usan guiones, especialmente desde que bootstrap se ha vuelto tan popular.

Estoy usando angular 1.0.5 a modo de

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

En la documentación de ngClass , el ejemplo es simple, pero también menciona que la expresión puede ser un mapa de nombres de clase a valores booleanos. Estaba tratando de usar el estilo "icon-white" en mi icono como se muestra en la documentación de arranque , dependiendo de una variable booleana.

<i class="icon-home" ng-class="{icon-white: someBooleanValue}">

La línea de arriba no funciona. La clase no se agrega icon-whitecuando someBooleanValuees verdadero. Sin embargo, si cambio la clave a iconWhite, se agrega con éxito a la lista de valores de clase. ¿Cómo se agregaría un valor con un guión?

¡Después de horas de pirateo, resulta que el tablero se interpola! Se necesitan cotizaciones.

<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">

Espero que esto ayude a alguien a arrancarse el pelo.

ACTUALIZAR:

En versiones anteriores de Angular, el uso de una barra diagonal inversa también funciona, pero no en las versiones más recientes.

<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">

Probablemente se prefiera el primero, ya que puede buscarlo más fácilmente en su editor favorito.

\'icon-white\' funciona bien (con AngularJS 1.2.7)

alternativa para usos ng-class:

    .menu-disabled-true{
color: red;
}
    .menu-disabled-false{
color: green;
}


<div ng-controller="DeathrayMenuController">
<p class=menu-disabled-{{status}}>shanam</p>
 <button ng-click="action()">click me</button>
</div>

<script>



function DeathrayMenuController($scope) {
    $scope.status=true
    $scope.action= function(){
      $scope.status=!$scope.status
    }
}
</script>