Great! The product price changed from a number to a formatted currency. How does it work?

  1. AngularJS gets the value of product.price.
  2. It sends this number into the currency filter. The pipe symbol (|) takes the output on the left and “pipes” it to the right.
  3. The filter outputs a formatted currency with the dollar sign and the correct decimal places.

In this way, filters help to separate the content in the controller from its presentation in the view.



AngularJS comes with a few more built-in filters. Let’s use two more.

In MainController.js inside $scope.product, add a third property named pubdate:

pubdate: new Date('2014', '03', '08')

In index.html inside <p class="date">, display the product’s pubdate.


Format the product’s pubdate by piping it to the date filter.


Format the product’s name by piping it to the uppercase filter.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?