display current value of ng-class in AngularJS

Question

I have to track down a bug related to work of ng-class (sometimes it adds new value without removing old). So I need a quick reference to see it's current value. Is there any short (or not) way to bind that to the content? I mean something like this:

<div ng-class="something">
    {{ngClassValueDisplayedHere}}
</div>

Answer 1

ng-class can bind to many different things. From the documentation:

Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

So in your example, just display whatever your something is. It's supposed to be an angular expression, which can be evaluated like any other with double-curlies. This will help you debug your ng-class

<div ng-class="something">
    {{something}}
</div>

Demo

Answer 2

I had exactly the same problem with ng-class not removing old value. After days of investigation it turned out that it was ngAnimate who was messing with class changes. removing it from angular module dependencies solved the problem (Angular 1.3).

Answer 3

In case someone else stumbles upon this problem like I did just recently with angular version 1.5.8: https://github.com/angular/angular.js/issues/14582

P.S. Update to 1.5.11 solved the issue related to ngAnimate, prior versions still had the same issue.