When making your call to your server, capture the error based upon the rejection of the $http
promise.
Then in your controller I would suggest flattening the response to an array of errors upon handling of the error for display as shown in this fiddle example:
for (var key in resp.ModelState) {
for (var i = 0; i < resp.ModelState[key].length; i++) {
errors.push(resp.ModelState[key][i]);
}
}
To put it all together:
// Post the data to the web api/service
$http.post(url, data)
.success(successHandler)
.error(function (response) {
// when there's an error, parse the error
// and set it to the scope (for binding)
$scope.errors = parseErrors(response);
});
//separate method for parsing errors into a single flat array
function parseErrors(response) {
var errors = [];
for (var key in response.ModelState) {
for (var i = 0; i < response.ModelState[key].length; i++) {
errors.push(response.ModelState[key][i]);
}
}
return errors;
}