title: Angular $http error response statusText always undefined
body: <p>I am trying to return a custom error message to the user to let them know what went wrong if an error occurs, but  I have tried everything to display the message and nothing seems to be capturing it. Here is my angular code:</p>
  
  <pre><code>$scope.save = function (style) {
      styleAPIservice.addStyle(style).success(function () {
          $scope.success = "Style added successfully";
      }).error(function (data, status, headers, config, statusText) {
          $scope.error = "An error occurred while saving style: " + data + "|"+data.data+"|"+data.statusText+"|"+statusText;
      });
  }
  </code></pre>
  
  <p>Here is the <strong>styleAPIservice</strong> function it's calling:</p>
  
  <pre><code>styleAPI.addStyle = function (style) {
      return $http.post(AppRoot + "api/StyleAPI/",
          JSON.stringify(style),
              {
                  headers: {
                      'Content-Type': 'application/json'
                  }
              });
  }
  </code></pre>
  
  <p>And here is the <strong>API</strong> function:</p>
  
  <pre><code>[HttpPost]
  public HttpResponseMessage PostStyle(Style style)
  {
      if (string.IsNullOrEmpty(style.Pattern.PatternName) || string.IsNullOrEmpty(style.StockNumber))
          return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Pattern Name and Stock Number are required.");
  
      var checkStyle = StyleRepository.LoadStyleByStockNumber(style.StockNumber);
      if (checkStyle != null)
          return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Style number already exists. Please use update.");
  
      try
      {
          // Save style
      }
      catch (Exception ex)
      {
          return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Error creating style: " + ex.Message);
      }
  
      HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, style);
      response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = style.StyleId }));
      return response;
  }
  </code></pre>
  
  <p>And here is what is returned when an error occurs (such as Style already exists):</p>
  
  <pre><code>An error occurred while saving style: [object Object]|undefined|undefined|undefined
  </code></pre>
  
  <p>What am I doing wrong? I feel like I've searched everywhere and tried every possible suggestion, but I am just at a loss as to why I can't display my error messages.</p>