How to use line break in GridList(dynamic tiles) in AngularJS

Question

I am using Grid List(dynamic tiles) in angularJS and using <br/> tag but it is not working

Here is the code

<div ng-controller="gridListDemoCtrl as vm" flex="" ng-cloak="" class="gridListdemoDynamicTiles" ng-app="MyApp">
        <md-grid-list md-cols="1" md-cols-sm="2" md-cols-md="3" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px" md-gutter-gt-sm="4px">

            <md-grid-tile ng-repeat="tile in compData" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background">
                {{tile.systemName}}<br>
                {{tile.createduser}}

            </md-grid-tile>
        </md-grid-list>
    </div>

I am using <br> tag after {{tile.systemName}} but it is not working

Answer 1

For those using material.angular.io, this works

<mat-grid-tile>
   <mat-card-content>
       <h2>your title</h2>
       <h4>your content</h4>
    </mat-card-content>
</mat-grid-tile>

Answer 2

After searching a lot I finally found the answer,Actually a friend of mine helped me.I just needed to use <md-content> tag then <br/> tag works in there.

 <md-grid-tile ng-repeat="tile in compData" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background">
       <md-content>
        <br/>{{tile.systemName}}
        <br/>{{tile.createduser}}
       </md-content>
    </md-grid-tile>

Answer 3

I suggest you to put the variables into divs like this:

<md-grid-tile ng-repeat="tile in compData" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background">
   <div>{{tile.systemName}}</div>
   <div>{{tile.createduser}}</div>
</md-grid-tile>