title: How to render errors to client? AngularJS/WebApi ModelState
body: <p>I'm building an AngularJS SPA application with WebApi for the backend. I am using attributes for model validation on the server, if validation fails this is what I return from the ModelState.</p>
  
  <pre><code>     {"Message":"The request is invalid.","ModelState":{"model.LastName":["Last Name must be at least 2 characters long."]}}
  </code></pre>
  
  <p>How do I then render this to the client with AngularJS?</p>
  
  <pre><code>      //Save User Info
      $scope.processDriverForm = function(isValid) {
          if (isValid) {
              //set button disabled, icon, text
              $scope.locked = true;
              $scope.icon = 'fa fa-spinner fa-spin';
              $scope.buttonText = 'Saving...';
              $scope.submitted = true;
              $scope.formData.birthDate = $scope.formData.birthMonth + '/' + $scope.formData.birthDay + '/' + $scope.formData.birthYear;
              $http({
                      method: 'POST',
                      url: 'api/Account/Register',
                      data: $.param($scope.formData),
                      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
                  })
                  .success(function (data) {
                      console.log(data);
                      toastr.success('User ' + $scope.formData.username + ' created!');
                      $scope.userForm.$setPristine();
                      $scope.formData = {};
                      //reset the button
                      $scope.locked = false;
                      $scope.icon = '';
                      $scope.buttonText = 'Save';
                      //reset validation submitted
                      $scope.submitted = false;
                  })
                  .error(function (data, response) {
                      console.log(data);
                      toastr.error('Ooops! There was an error creating the user. Try again and if the problem persists, contact Support.');
                      //reset the button
                      $scope.locked = false;
                      $scope.icon = '';
                      $scope.buttonText = 'Save';
                      $scope.submitted = false;
  
                      var resp = {};
  
                      var errors = [];
                      for (var key in resp.ModelState) {
                          for (var i = 0; i &lt; resp.ModelState[key].length; i++) {
                              errors.push(resp.ModelState[key][i]);
                          }
                      }
                      $scope.errors = errors;
  
                  });
  
          }
          else {
              toastr.warning('Invalid User Form, correct errors and try again.');
          }
      };
  </code></pre>