Let’s do a quick review:

  • A module contains the different components of an AngularJS app
  • A controller manages the app’s data
  • An expression displays values on the page
  • A filter formats the value of an expression



Let’s add more data to the controller and display them in the view.

In the controller, delete the $scope.product object.


Attach a new property to $scope named products. Set it equal to an array of objects. Type in the contents exactly as you see here:

[ { name: 'The Book of Trees', price: 19, pubdate: new Date('2014', '03', '08'), cover: 'img/the-book-of-trees.jpg' }, { name: 'Program or be Programmed', price: 8, pubdate: new Date('2013', '08', '01'), cover: 'img/program-or-be-programmed.jpg' } ]

In the view inside <div class="main">, delete the HTML that displays the product’s name, price, and pubdate.

Replace it with this HTML. Type in the contents exactly as you see here:

<div ng-repeat="product in products" class="col-md-6"> <div class="thumbnail"> <img src="img/the-book-of-trees.jpg"> <p class="title">{{ product.name }}</p> <p class="price">{{ product.price | currency }}</p> <p class="date">{{ product.pubdate | date }}</p> </div> </div>

You’ll see that both products have the same cover image. Let’s fix this bug in the next exercise. Click Next to continue.

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?