Nested *ngFor with Bootstrap collapse

For hours i tried to figure how to make it work.
Searched everywhere and couldn't find the write example.
The second block where I use j for index won't expand ???

Here is my code..

<div class="col-xs-2">
    <div class="list-group list-group-root well">
         <span *ngFor="let region of locations; let i = index">
            <a  class="list-group-item"
                data-toggle="collapse" 
                [attr.data-target]="'#' + i" 
                (click)="centerOn(region.name, region)">
                <i class="glyphicon glyphicon-chevron-right"></i>{{ region.name }}
            </a>
            <div class="list-group collapse" [attr.id]="i">
                <span  *ngFor="let city of region.cities; let j = index">
                    <a  class="list-group-item" 
                        data-toggle="collapse"
                        [attr.data-target]="'#' + j"
                        (click)="centerOn(city.name, city)">
                        <i class="glyphicon glyphicon-chevron-right"></i>{{ city.name }}
                    </a>
                    <div class="list-group collapse" [attr.id]="j">
                        <span  *ngFor="let cityArea of city.areas">
                            <a  class="list-group-item" 
                                data-toggle="collapse"
                                (click)="centerOn(cityArea.name, cityArea)">
                                {{ cityArea.name }}
                           </a>
                    </span>
                </div>
            </span>
        </div>
    </span>
</div>