angularjs how to repeat and where to store pictures - angularjs

Question

i have this code in my html:
<div class="col-xs-3" >
<div id="coupon1-tile"><span>coupon1</span></div>
</div>
<div class="col-xs-3 ">
<div id="coupon2-tile"><span>coupon2</span></div>
</div>
<div class="col-xs-3">
<div id="coupon3-tile"> <span>coupon3</span> </div>
</div>
</div>
in my css i have this code:
#coupon1-tile, #coupon2-tile, #coupon3-tile {
height: 250px;
width: 85%;
margin-bottom: 15px;
position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
}
#coupon1-tile:hover, #coupon2-tile:hover, #coupon3-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#coupon1-tile {
background: no-repeat;
background-position: center;
}
#coupon2-tile {
background: no-repeat;
background-position: center;
}
#coupon3-tile {
background: no-repeat;
background-position: center;
}
now i have $scope.coupons where i retrieve data from the db, every coupon has details and picture.
my questions:
1. how do i revise my code in the html page to show the coupons pictures inside the same structure i have here, that means 3 coupons in a row?
2. where should i save the pictures and what is the path i should store in my db? please be percise( i work with derby and local host).
3. i work with eclipse dynamic web project if it is necessary for the saving the pictures question part.
Thanks