How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

[tenX]

I have a problem where my CSS is not taking effect (in Chrome), and I think there is some conflict with Twitter Bootstrap.\[code\]input.ng-invalid { border-color: red; outline-color: red;}\[/code\]My pattern is defined in my controller as:\[code\]$scope.hexPattern = /^[0-9A-Fa-f]+$/;\[/code\]And copying the HTML from the live DOM, I see that both \[code\]ng-invalid\[/code\] and \[code\]ng-invalid-pattern\[/code\] are set, so my \[code\]ng-pattern\[/code\] must be working.\[code\]<div class="control-group"> <label class="control-label" for="salt">Salt: </label> <div class="controls"> <input type="text" id="salt" ng-model="salt" ng-pattern="hexPattern" class="ng-dirty ng-invalid ng-invalid-pattern"> </div></div>\[/code\]I see that in the "Validation states" section of the Forms section of Twitter Bootstrap Base CSS, I see I need to add the \[code\]error\[/code\] class to the control-group div.\[code\]<div class="control-group error">\[/code\]Question: How to set the \[code\]class=error\[/code\] based on the child input \[code\]class=ng-invalid\[/code\]? Can this be done with some soft of ng-class expression? Can I set this via code in the controller? Is there a way to ".$watch" the pattern evaluation like property changes? Any other ideas to get my "red" outline?