How to create an expanded row using Smart Table in AngularJS?

Question

I have been trying to add an extension panel to my smart table in angular. The table shows data which displays once an enter button is clicked, and I want an extension button to be shown on the side of each of the rows so that I can display other data below. I have been following this smart table example: https://plnkr.co/edit/W8S3EaDI9sxuj8IjHiCN?p=preview which does exactly what I am trying to do. But, when I copy the exact same code it does not work in my angular version. It also seems like the demo code was done with Angular version 1 (AngularJS).

<div ng-controller="safeCtrl" class="table_class">

    <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th st-ratio="20">#</th>
                <th st-sort="Delivered" style="color: white;">Delivered</th>
                <th st-sort="orgRadar" style="color: white;">Organization Radar</th>
                <th st-sort="root_build" style="color: white;">Root Build</th>
                <th st-sort="inserted_by" style="color: white;">Inserted By</th>
                <th st-sort="milestone" style="color: white;">Milestone</th>
                <th st-sort="applicable_chipsets" style="color: white;">Applicable Chipsets</th>
                <th st-sort="project_tag" style="color: white;">Project Tag</th>
                <th st-sort="gerrits" style="color: white;">Gerrits</th>
                <th st-sort="inserted_on" style="color: white;">Inserted On</th>
                <th st-sort="SDK" style="color: white;">SDK</th>
            </tr>
            <tr>
                <th colspan="10"><input st-search="" class="form-control"
                        placeholder="global search ..." type="text" /></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in displayedCollection" *ngFor="let item of newPost.posts">
                <td>
                    <button ng-if="row.expanded" ng-click="row.expanded = false"
                        class="btn btn-xs btn-default glyphicon glyphicon-chevron-down"></button>
                    <button ng-if="!row.expanded" ng-click="row.expanded = true"
                        class="btn btn-xs btn-default glyphicon glyphicon-chevron-right"></button>
                </td>
                <td style="color: red;">{{item.Delivered}}</td>
                <td style="color: red;">{{item.orgRadar}}</td>
                <td style="color: red;">{{item.root_build}}</td>
                <td style="color: red;">{{item.inserted_by}}</td>
                <td style="color: red;">{{item.milestone}}</td>
                <td style="color: red;">{{item.applicable_chipsets}}</td>
                <td style="color: red;">{{item.project_tag}}</td>
                <td style="color: red;">{{item.gerrits}}</td>
                <td style="color: red;">{{item.inserted_on}}</td>
                <td style="color: red;">{{item.SDK}}</td>
                <td>
                    <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                        <i class="glyphicon glyphicon-remove-circle">
                        </i>
                    </button>
                </td>
            </tr>
            <tr ng-if="row.expanded" ng-repeat-end="">
                <td colspan="10">
                    <b>Original Radar<br /></b>
                </td>
                <td colspan="10" st-ratio="20">{{item.orgRadar}}</td>
            </tr>
        </tbody>
    </table>
</div>

MY CURRENT OUTPUT: my current output

DEMO OUTPUT: demo output

That would be great if anybody could help me with this issue. Thank you!