AngularJS ng-repeat to create divs

Question

I want to use AngularJs to create some div structure but it doesn't work at all. How am I supposed to use range ?

<div ng-controller = "gameController">
    <div class="table">
        <div ng-repeat = "i in [] | range:game.nrLines">
            <div class="trow">
                <div ng-repeat = "j in [] | range:game.nrCols">
                    <span class="element">
                        <img src="img/elep.png" class="element" data-col = {{j}} data-line= {{i}}>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

And here is the Angular code :

var gameApp = angular.module("gameApp", []);
gameApp.filter('range', function() {
    return function(input) {
        for (var i=0; i<input; i++) {
            input.push(i);          
        }
        return input;
    }
});

gameApp.controller("gameController", function($scope) {
    $scope.game = new Game();
    $scope.nrCols = $scope.game.matrix.getNrCols;
    $scope.nrLines = $scope.game.matrix.getNrLines;
});

Thanks !

Answer 1

Your filter is missing a parameter for the range. Input is what you're going to be returning from the filter, so you just need to add another parameter for the actual count:

gameApp.filter('range', function() {
    return function(input, count) {
        for (var i=0; i<count; i++)
            input.push(i);          
        return input;
    }
});

I've made a plnkr here to help