Данные, загруженные в Angular, отображаются как String вместо Object при получении из Header var

Question

На угловом контроллере у меня есть следующая функция:

vm.test = function () {
  testService.test()
    .then(function (response) {
      var pagination = response.data;
      var xPagination = response.headers("x-pagination");
      console.log(pagination);
      console.log(xPagination);
    })
}

На консоли я вижу, что для разбиения на страницы это объект, но xPagination показывает как:

 { "pageNumber": 2}

Так что я получаю неопределенный, когда я пытаюсь:

 console.log(xPagination.pageNumber);

Но у меня нет этой проблемы при использовании pagination.pageNumber.

Тестовый API, который я вызываю, использует ASP.NET API, и у меня есть:

На ASP.NET Web Api у меня есть следующее:

// This is test code to isolate the problem
public async Task<IHttpActionResult> Test() {

  Pagination pagination = new Pagination { PageNumber = 2 }; 

  HttpResponseMessage response = Request.CreateResponse<Pagination>(HttpStatusCode.OK, pagination);

  String xPagination = JsonConvert.SerializeObject(pagination, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });

  response.Headers.Add("x-pagination", xPagination);

  return ResponseMessage(response);

}

Что мне не хватает? Я хотел бы, чтобы xPagination был объектом в Angular.

Я делаю что-то не так в API или мне нужно сделать что-то еще на Angular?