AngularJS Example:
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
<div ng-controller="TodoCtrl">
<div id="watchlist">
<div class="movie_wrap" ng-repeat="movieWrappers in sortedMovies">
<div class="movie_container" ng-repeat="movie in movieWrappers.movies">{{movie.link}}</div>
</div>
</div>
</div>
</div>
CSS
.movie_wrap {
background-color: red;
margin-bottom: 10px;
}
JavaScript
function TodoCtrl($scope) {
$scope.movies = [{
title: 'Star Wars',
release_date: '10-11-2015',
movie_id: '3381',
link: 'ePbKGoIGAXY'
}, {
title: 'Spectre',
release_date: '25-12-2015',
movie_id: '3371',
link: 'KlyknsTJk0w'
}, {
title: 'Revenant',
release_date: '02-03-2016',
movie_id: '3361',
link: 'nyc6RJEEe0U'
}, {
title: 'Star Wars',
release_date: '10-11-2015',
movie_id: '3351',
link: 'zSWdZVtXT7E'
}, {
title: 'Spectre',
release_date: '25-12-2015',
movie_id: '3441',
link: 'ePbKGoIGAXY'
}, {
title: 'Revenant',
release_date: '02-03-2016',
movie_id: '3331',
link: 'Lm8p5rlrSkY'
}];
$scope.sortMoviesForWrapper = function() {
$scope.sortedMovies = [];
while ($scope.movies.length > 0)
$scope.sortedMovies.push({"movies" : $scope.movies.splice(0, 3)});
console.log($scope.sortedMovies)
};
$scope.sortMoviesForWrapper();
}