Handle nested ng-repeat in AngularJS - angularjs

Question

I am newbie in Angular js. Trying to use ng-repeat in following way
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.names = ["Emil", "Tobias", "rajeev", "sandeep","deepak"];
});
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div id="{{ 'tile' + $index }}" class="tile" ng-repeat="x in names">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>
It gives me structure like this
myNewTile
myNewTile
myNewTile
myNewTile
myNewTile
I wanna every row contain only two tiles. For third and fourth tile new row should be created and so on. something like this
myNewTile myNewTile
myNewTile myNewTile
myNewTile

Answer 1

You have two options:
First Solution
Just put the ng-repeat in your column div:
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6 col-xs-6" ng-repeat="x in names">
<div id="{{ 'tile' + $index }}" class="tile">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>
Bootstrap will take care of the rest.
OR Second Solution
The problem with the first solution will arise when the height of each columns are not same due to the content then the Bootstrap will not be able to perform proper alignment of the columns. So you can either use this one.
You can first collate your list and the put two ng-repeat inside there:
// An helper function to collate the list
Array.prototype.collate = function(size) {
var list = [];
angular.forEach(this, function(item, i) {
if (i % size === 0) {
list[Math.floor(i / size)] = [item];
} else {
list[Math.floor(i / size)].push(item);
}
});
return list;
};
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var names = ["Emil", "Tobias", "rajeev", "sandeep", "deepak"];
$scope.collatedNames = names.collate(2);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row" ng-repeat="names in collatedNames">
<div class="col-xs-6" ng-repeat="x in names">
<div id="{{ 'tile' + $index }}" class="tile">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>