Arrangement of dynamic Checkbox in html and angular

I have a dynamic Checkbox in an html page. The values in these checkbox are taken using angular. This is my html file:

<h2 class="sub-header" style="color:#4e67c3;"> Scegli gli ingredienti </h2>  


             <form ng-submit="submitRtIngredient()">  

                <table>  

                    <tr >  
                        <th colspan="4" class="th2">Scegli gli ingredienti</th>  
                     </tr>  
                    <tr ng-repeat="ingredient in ingredients">  
                       
                        <td><!-- <select type="checkbox" ng-model="rtingredientForm.ingredient.idingredient"   /> -->
                        
                            <input type="checkbox" ng-model="ingredient.isingredient"> <br>

                        </td> 
                             
                    </tr>  





                    <tr>  
                        <td colspan="4" ><input  style="width:200px" onmouseover="this.className='button2'" onmouseout="this.className='blue-button'" type="submit" value="Invia" class="blue-button" /></td>  
                    </tr>   
                </table>  
            </form>


     
   
              
    <script src="http://ift.tt/1LH8T78"></script> 
    <script src="scripts/rest-services.js"></script>
    <script src="scripts/main-admin.js"></script>
 
    <script src="scripts/jquery.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="scripts/angular.js"></script>

    <script type="application/javascript"></script>

This is the view of my page:

The checkbox are dynamic, taken from a database. The problem is that I want to arrange these checkbox in 5 column, in this way: so that when in my database add more of these fields, in my view I have all these fields arranged in five columns and n rows. How can I do it?