AngularJS показывает научный номер в шаблоне

У меня есть API, который возвращает float в мое приложение Angular с помощью $ http.

// Send the API request and handle the response/error
        $http( request ).then( function( response ) {
            console.log( response.data.pension.amount );
        }

В консоли, response.data.pension.amount же, как и должно быть, и показывает 4500.00, но если я добавлю его в свой шаблон (т.е. {{ data.pension.amount }}), он фактически отображается в браузере как 4.208266786607881e-8.

Я застрял в том, как я могу получить это значение для правильной отображения на моей странице.

Я пытаюсь использовать это с Угловым валютным фильтром, который отображается как $ 0.00 из-за формата научных чисел.

Изменение: другой пример

API возвращает следующее:

{
  ...
  "pension": {
    "amount": "4500.00",
  }
  ...
}

Если я использую typeof в консоли, я получаю строку, и если я ставлю console.log pension или pension.amount, я вижу 4500.00 в виде строки.

Но, если я console.log просто response.data, в пенсионном объекте он больше не показывает "4500.00". Вместо этого он показывает 4.208266786607881e-8.

Мне интересно, если это проблема с тем, что он находится в вложенном объекте?