javascript - Why angularJS loop rendering boxes in new row -

i have products want display side side this.

this hard coded code works fine.

<div>     <div class="box"></div>     <div class="box"></div>     <div class="box"></div>     <div class="box"></div>     <div class="box"></div>     <div class="box"></div> 

but when trying achieve same thing angularjs loop.

<div ng-repeat="product in products">     <div class="box">         //i fill details here.     </div> </div> 

i got result.

this css class.

.box { padding : 5px; display : inline-block; min-width: 100px; min-height: 50px; background-color: red; } 

what changes need products can display side side , in next row if screen width full.

fixing original problem

your ng-repeat should on <div class="box">

<div>     <div ng-repeat="product in products" class="box">         //i fill details here.     </div> </div> 

description of doing wrong

by doing creating repeating new <div class="box"> each product in products.

the way doing before meant creating new container element each product in products.

simple , easy error make.

fixing css styling

to achieve style showed in op, want add margin repeated elements add spacing between them. change:

.box {     padding : 5px;     display : inline-block;     min-width: 100px;     min-height: 50px;     background-color: red; } 

to

.box {     margin-right : 5px;     display : inline-block;     min-width: 100px;     min-height: 50px;     background-color: red; }