ng-class adds a class that it shouldn't on controller init

[ndabas]

I'm trying to use an ng-class attribute to dynamically add an error class, which will highlight the invalid form field when used with Twitter Bootstrap.

This works fine, except for the case when I initialize the property bound to the input element in the controller. If I set the required attribute on the input, the error class is (incorrectly) added to the element with ng-class, even though the text box has a value.

It also works fine if I delete and type in a new value in the text box.

Plunker: http://plnkr.co/edit/DoHCwo

This is the markup:

<div ng-class="{ 'control-group': true, error: form.a.$invalid }">
  <label class="control-label" for="a">A:</label>
  <input type="text" name="a" ng-model="a" required />
</div>

This is the minimal controller:

function FormTestController($scope) {
  $scope.a = 1;
}

I have included Angular.js 1.0.4 and Bootstrap 2.3.0 (just the CSS) on the page. You can see the the error class is added, and the text box and label are consequently red. I've tested this in Chrome 24 and Internet Explorer 10.

[pkozlowski-opensource]

Indeed, this one looks fishy, at least I wouldn't expect it to behave like this. Need to dig more / prepare a test case for this but in the meantime you can work-around this by adding form.$pristine to the condition:
http://plnkr.co/edit/U49UD7?p=preview

[ndabas]

Thanks for looking into this. I ultimately went with form.$dirty as a work-around, but I really wanted all invalid fields to show up immediately, even if they're not dirty.

[pkozlowski-opensource]

This was fixed in master via 5f5d4fe, will be part of the next release:
http://plnkr.co/edit/uoAC62?p=preview

[ndabas]

Excellent!