AngularJS form item validation properties before <form> tag

Is this normal behaviour in AngularJS? ng-class expression related with FORM and referenced before FORM (or INPUT) tag is calculated correctly only if validation status for that form element is changed (try to type in valid email in fiddle). Three identical H2-s showing different expression calculations before tags, and correct values after email input edit (note that {{TestForm.Email.$valid}} is showing correct value in both cases):

JSFiddle: http://jsfiddle.net/nEzpS/26/

HTML:
<div ng-controller="TestController">

    <h2 class="someInitialClass" ng-class="TestForm.Email.$valid && 'classOK' || 'classError'">Email field validation result is <b>{{TestForm.Email.$valid}}</b></h1>

    <form name="TestForm" ng-submit="formSubmit()">

         <input type="email" class="input-xlarge" maxlength="100"
                             name="Email" 
                             ng-model="Client.Email" 
                             ng-required="true" ng-maxlength="100"
        >

    </form>

    <h2 class="someInitialClass" ng-class="TestForm.Email.$valid && 'classOK' || 'classError'">Email field validation result is <b>{{TestForm.Email.$valid}}</b></h1>

    <br/><br/>

    <ul ng-repeat="FormItem in TestForm">
        <li>{{$index}} {{FormItem.$error}}
        </li>
    </ul>

    <br/><br/>

</div>

JS:
function TestController($scope) {

}​
​
CSS:
.someInitialClass {
    font-family: Helvetica;
}

.classError {
    color:red;
}

.classOK {
    color: green;
}