angularjs - md card content color change -

    <md-card  class="md-padding" animate-on-change="currentcard" class="col-md-8" >  <md-card-content>  </md-card-content> </md-card> 

how change color of md-card or md-card-content based on condition?

i need change color if currentcard.redalert= true

here's 1 way of doing - codepen

markup

<div ng-controller="appctrl" ng-cloak="" ng-app="myapp">   <md-card  class="md-padding" animate-on-change="currentcard" class="col-md-8" style="background:{{currentcard.redalert?'red':'blue'}}" >    <md-card-content>    </md-card-content>   </md-card>   <md-button class="md-raised md-primary" ng-click="toggle()">toggle</md-button> </div> 

js

angular.module('myapp',['ngmaterial', 'ngmessages'])  .controller('appctrl', function($scope) {   $scope.currentcard = {     redalert: true   };   $scope.toggle = function () {      $scope.currentcard.redalert = !$scope.currentcard.redalert;   } });