Angular validation issue - angularjs

Question

I've got an issue with the Angular validation classes. I've got three classes in my css with three different images, that shows if the field is required, if the user has filled in correct or not. E.g. I have one input field where the user types in a personal number, and I look it up in a service and fills the model with firstname, lastname, address etc. which also populates the input fields.
I made a simple example
HTML
<div ng-app="ebu" ng-controller="search">
<button id="search-apparentice" ng-click="addName()">Search apprentice</button>
<hr>
<input id="username" type="text" ng-model="user.name" required>
</div>
JS
angular.module('ebu', []).
controller('search', function($scope) {
$scope.user = {};
$scope.addName = function()
{
$scope.user.name = "Kasper";
}
})
CSS
input[required].ng-invalid
{
border: 1px solid red;
}
input[required].ng-valid
{
border: 1px solid green;
}
input[required].ng-pristine
{
border: 1px solid blue;
}
[FiddleJS][1][1]: http://jsfiddle.net/kaspergantzhorn/z1wg6tko/9/

Answer 1

It's still pristine because pristine means it has never had focus. The user is not clicking on it, therefore it never gets dirty. If this isn't a user-modified field, pristine is not the right thing to use.
Additionally, in the ng-change of the input, you should be able to use $setDirty.
<input type="text" ng-change="formName.inputName.$setDirty()" />
For you code above:
<div ng-app="ebu" ng-controller="search">
<button id="search-apparentice" ng-click="addName(); myForm.name.$setDirty()">Search apprentice</button>
<hr>
<form name="myForm">
<input name="name" id="username" type="text" ng-model="user.name" required>
</form>
</div>