javascript - data is not transferred to the Angular component

Question

I use my-table Angular component from the AngularJS code:

// AngularJS code
// src/template/expanded-table.html 

...
<div ng-show="tableLoadedSuccess" class="table-view-port">
      <my-table ng-if="tableLoadedSuccess"
                [model]="tableModel"
                [dataSource]="data">
      </my-table>
</div>
...

In the Controller I have:

// AngularJS code
// src/js/modules/ExpandedTableController.js


function ExpandedTableController(
    trailsService,
    ...
) {
...
   var searchTrails = function() {
        let settings = $scope.persistState.trails.trailsExpandedTableSettings;
        trailsService
            .getTrailEvents(settings, $scope.filterParam)
            .then(function(resp) {
                $scope.data = [1,2,3]; // just to test with this simple array
                $scope.tableLoadedSuccess = true;
            });
    };
...
    _.extend($scope, {
        ...
        tableLoadedSuccess: false,
        data: [],
        tableModel: new EventTableModel(trailsExpandedTableSettings),
        ...
    });

    ...
    searchTrails();
    ...

TableComponent:

// Angular code
// src/ts/app/shared/components/table/table.component.ts

...
export class TableComponent<T> implements OnInit {
   @Input() dataSource: T[];
   ...
   ngOnInit() {
        console.log('Table component dataSource: ' + this.dataSource);
   }
   ...

For some reason, I have undefined in this.dataSource in the code above.

UPDATED: I tried to wrap $scope.tableLoadedSuccess = truein timeout in case if the data might not be retrieved yet when hitting ngOnInit lifecycle hook:

// AngularJS code
// src/js/modules/ExpandedTableController.js

...
trailsService
            .getTrailEvents(settings, $scope.filterParam)
            .then(function(resp) {
                $scope.data = [1, 2, 3];
                $timeout(function () {
                    if ($scope.tableLoadedSuccess) {
                        $scope.tableLoadedSuccess = true;
                        $scope.$apply();
                    }
                }, 50000);
            });
...

I got dataSource as undefined, but TableComponent is rendered after some time (50000).

Answer 1

I have found a solution. I need to pass data to the component without camel case, but with a dash (like this [data-source]="data"):

// AngularJS code
// src/template/expanded-table.html 

...
<div ng-show="tableLoadedSuccess" class="table-view-port">
      <my-table ng-if="tableLoadedSuccess"
                [model]="tableModel"
                [data-source]="data">
      </my-table>
</div>
...