Fill MD-GRID-LIST recursive with NG-INCLUDE

[Robin Heinz]

Hello,

I try to fill a angular-material Grid List (md-grid-list) recursive with Tiles (md-grid-tiles). To do this I tried to use ng-include. My first problem was the sourrounding ng-include Element which angular is putting around my tiles. Then I tried a custom directive which removes this Element. that's working for the first Tile, but when it comes to creation of the tiles in a ng-repeat angular throws an error that the tile doesn't find the grid-list.

If I am using repeat outside of the included template it's working. 

Do you have any Idea why this is not working or a suggestion what I am doing wrong.

Thank you very much in advance.

Robin

Here some code snippets:

Directive which removes the generated Include Element:

.directive('includeReplace', function () {

    return {

        require: 'ngInclude',

        restrict: 'A', /* optional */

        link: function (scope, el, attrs) {

            el.replaceWith(el.children());

        }

    };

});

Html Template:

<script type="text/ng-template" id="stationGroupTile.html">

<!-- This is working -->

   <md-grid-tile ng-click="log(selectedGroup)"

                  md-rowspan="{{selectedGroup.stationCount()}}"

                  style="background-color:black">

        <md-grid-tile-header>

            <h3>Stations: {{selectedGroup.stationCount()}}</h3>

            <h3>Layer: {{selectedGroup.layerCount()}}</h3>

        </md-grid-tile-header>

    </md-grid-tile>

    <md-grid-tile ng-init="log('Stat')">Station</md-grid-tile>

    

    

 <!-- This is not working -->

     <span ng-repeat-start="station in selectedGroup.stations"></span>

    

     <md-grid-tile 

                  ng-click="log(station)"

                  md-rowspan="{{selectedGroup.stationCount()}}"

                  style="background-color:black">

        <md-grid-tile-header>

            <h3>Station</h3>

        </md-grid-tile-header>

    </md-grid-tile>

    <span ng-repeat-end></span>

<!-- Something like this is also working! -->

    <span ng-repeat-start="station in selectedGroup.stations"></span>

        <div ng-init="log(station)">

    <span ng-repeat-end></span>

</script>