Toggle css on ng-click

Question

This is the basic idea of my code:

HTML (jade):

#preferencesBox(ng-click="toggleCustom()")
   .glyphicon.glyphicon-heart

CSS:

#preferencesBox.active{
   color: #d04f37;
}

Angular:

$scope.check = true;
$scope.toggleCustom = function() {
    $scope.check = $scope.check === false ? true: false;
};

I want to add the css color : #d04f37 when the user clicks the parent #preferencesBox. Adding/removing .active is the jQuery way. How should my ng-class or the rest code look like?

Answer 1

You can use an expression inside ng-class that will watch the check variable:

ng-class="{'active' : check}"

When check = true, add class active