ng-repeat and accessing item elements - angularjs

Question

I'm using ng-repeat to generate a table (for example):
<table ng-repeat="item in items">
<tr>
<td>
<input ng-blur="changeMyItem($event)">{{item.Name}}</input>
<td>
<td>
<div>{{itemError}}</div>
</td>
</tr>
</table>
I am making a call that could potentially fail and I am having a hard time figuring out how to set itemError above to the error message after the page has been rendered when there is an error.
From my changeMyItem method (triggered by ng-blur) I've tried the expression syntax and it just becomes an empty div. I've also tried calling $scope.$apply in my success callback and it says $digest is already in progress and errors.
Without using a custom directive, how can I update itemError above with the related error?

Answer 1

Mike,
If you are trying to set an error message for each individual input, this should do.
<table ng-repeat="item in items">
<tr>
<td>
<input ng-blur="changeMyItem(item, $event)" ng-model="item.Name">
<td>
<td>
<div>{{item.ErrorMessage}}</div>
</td>
</tr>
</table>
In you controller, you can have something similar to:
$scope.changeMyItem = function(item, $event) {
if(!item.Name) {
item.ErrorMessage = "This has error";
}
}

Answer 2

Well, I think the easiest way would be to ng-init a new object for each repeated table, and pass that to the changeMyItem function:
<table ng-repeat="item in items" ng-init="itemError = { message : '' }" >
<tr>
<td>
<input ng-blur="changeMyItem($event, itemError)">{{item.Name}}</input>
</td>
<td>
<div>{{itemError.message}}</div>
</td>
</tr>
</table>
Use an object with a property so that you pass it by reference to the function.
Then you can do:
$scope.changeMyItem = function(event, error) {
//whatever
error.message = "It didn't work!";
}

Answer 3

You really should use a service:
<table ng-repeat="item in myForm.items track by $index">
<tr>
<td>
<label>{{item.Title}}</label>
<input ng-blur="myForm.changeMyItem($event, $index)" ng-model="item.Value">
<td>
<td>
<div>{{item.Error}}</div>
</td>
</tr>
</table>
Then
app.factory('myForm', function(){
var myform = {};
myForm.items = [{ ... }];
myForm.changeMyItem = function(event, index){
};
myForm.submit = function(){
};
myForm.setErrors = function(){
};
...
return myForm;
});