How to assign arrays of objects by key in ng-repeat?

Question

How to loop and assign elements to right col by grid_id in angular ng-repeat and display el content?

I've created jsfiddle with working example.

<div ng-app>
    <div ng-controller="MainController">
        <div class="row" data-ng-repeat="row in rows">
            <div class="col" data-ng-repeat="col in row.col">{{col.grid_id}}</div>
            <!-- <div ng-repeat="el in elements track by col.grid_id">
              {{el.el}}
              <button ng-click="checkEl(row, col, $index)">check el</button>
            </div> -->
        </div>
    </div>
</div>

function MainController($scope) {
    $scope.elements = [{
        el: "Nutella",
        grid_id: 11
    }, {
        el: "Audi",
        grid_id: 4
    }, {
        el: "Samsung",
        grid_id: 7
    }];
    $scope.rows = [{
        col: [{
            grid_id: 1,
            elements: []
        }, {
            grid_id: 2,
            elements: []
        }, {
            grid_id: 3,
            elements: []
        }, {
            grid_id: 4,
            elements: [{el: "Audi"}]
        }]
    }, {
        col: [{
            grid_id: 5,
            elements: []
        }, {
            grid_id: 6,
            elements: []
        }, {
            grid_id: 7,
            elements: [{el: "Samsung"}]
        }]
    }, {
        col: [{
            grid_id: 9,
            elements: []
        }, {
            grid_id: 10,
            elements: []
        }, {
            grid_id: 11,
            elements: [{el: "Nutella"}]
        }, {
            grid_id: 12,
            elements: []
        }]
    }];
}

Answer 1

<div ng-repeat="el in elements | filter: {grid_id:col.grid_id} : true ">

Is this what you want ? jsfiddle

The idea is using filter to match grid_id in element.

track by is not for this.