Typescript Issue with Angular UI grid Tree View

Below is a usual angularJS html sample using ui-grid-tree-view, which renders properly.

<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid">

when converting the code to typescript, ui-grid-tree-view directive is not rendering, even the pre function in the directive is not being reached.

For typescript code, "gridOptions" is being added as a public var to the controller class. Relevant code sample:

export class MyController{
    constructor(){
        this.gridOptions = {
            columnDefs: [
                { name: 'Name', width: '15%' },
                { name: 'Description', width: '15%' },
                { name: 'IsActive', cellTemplate: '<ul ng-if="row.entity.IsActive == true"><li style="color:green"></li></ul><ul ng-if="row.entity.IsActive== false"><li style="color:red"></li></ul>', width: '10%' }
            ]
        }
    }
}

Created the required dataArray for tree view using a recursion function. Using in HTML:

<div ng-controller="MyController as ctrl"
    <div id="grid1" ui-grid="ctrl.gridOptions" ui-grid-tree-view class="grid"></div>
</div>

Any suggestions are welcome.