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.