Angularjs ng class not working as expected with loading

This piece of code

    <div ng-class="{alert: true, alert-success: geocode.success, alert-danger: !geocode.success}">{{geocode.status}}</div>

      

        
        
        
      

    

received an error

Syntax Error: Token '-' is at column {2} of the expression [{3}] starting at [{4}].

      

        
        
        
      

    

But if I update the code to

    <div ng-class="{alert: true, green: geocode.success, red: !geocode.success}">{{geocode.status}}</div>

      

        
        
        
      

    

it works.

ng-class doesn't like css name with -

how alert-danger

alert-success

?

Chunks