Customize using ng-class angular js

Question

I have two css classes.caret .right and .caret .down this is my code

<span> ng-class="{'caret right': checkboxer[mainParent]==true,'caret down': checkboxer[mainParent]==false}" </span>

and my css

.caret .right{transform: rotate(270deg);}.caret .down{transform:rotate(360deg);}

the caret class is from bootstrap. Its not affecting my span ? What error i have done?

Answer 1

Here is the working plunk.

  <div ng-click="toggle()">
    <span ng-class="{'right-caret':checkbox,'caret': !checkbox}"></span> Caret
  </div>

Another simpler Approch

class="caret {{checkboxer[mainParent] ? 'right' : 'down'}}"

Working Fiddle