Angular: Error class on parent div

http://angularjs.org/

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>

<form name="myForm" ng:controller="MyForm">
    <input type="text" ng:model="user.name" />
    
    <div ng:class="validClass(myForm.emailWidget)">
        <input type="email" name="emailWidget" ng:model="user.email" required />
    </div>
    
    <input type="submit" ng:disabled="{{myForm.$invalid}}" />
</form>



<div ng:show="myForm.email.$invalid">The email is invalid and this message is outside of the form...</div>

CSS

.invalid {
  background-color: red;
  bored:1px solid #FFF;
}
.invalid:active{
    border:1px solide #FFF;
}

.valid {
  background-color: green;
}

JavaScript

function MyForm() {
    this.validClass = function(widget) {
        return widget.$valid && 'valid' || 'invalid';
    };
}