Angular Smart Table with Ajax Data won't output

Question

I try to use smart Table on remote Data but I do not get any output. I've been reading in documentation that on ajax data should be used the stSafeSrc attribute, but obviously I'm doing something wrong.

My Markup looks as it follows

<div class="content">
    <div class="container">

{% verbatim %}
{{ rowCollection }}

<button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
            <i class="glyphicon glyphicon-plus"></i> Add Feed
</button>

<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
    <thead>
    <tr>
        <th>Feed Name</th>
        <th>parsed Items</th>
        <th>Feed Link</th>
        <th>Feed Type</th>
        <th>Import</th>
        <th>Categorize</th>
    </tr>
    </thead>
    <tbody>

    <tr ng-repeat="row in displayedCollection">
        <td>{{row.feed_type}}</td>
        <td>{{ row.id }}</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>
{% endverbatim %}
</div>
</div>

Controller

october.controllers['dashboard/feeds'] = function ($scope, $filter , $request) {
    $.request('onFeeds', {success: function(data, scope){
        this.success(data).done(function() {
            $scope.rowCollection = [];
            $scope.rowCollection = angular.fromJson(data.result);
            $scope.displayedCollection = [].concat($scope.rowCollection);
            console.log($scope.rowCollection); // Array of Objects is present
        });
    }
});

}

Answer 1

By the look of it you're using this

https://github.com/responsiv/angular-plugin

You're controller code is wrong. You're calling $.request() instead of $request(), which is something their $request service actually proxies http requests to. This is why it appears to be working. But you're not actually making a http request through their service - which would be inside angular - you're making it outside of angular, through a third party library they use.

You need to change your controller to the following:

october.controllers['dashboard/feeds'] = function ($scope, $filter , $request) {
    $request('onFeeds', {success: function(data, scope){
        this.success(data).done(function() {
            $scope.rowCollection = [];
            $scope.rowCollection = angular.fromJson(data.result);
            $scope.displayedCollection = [].concat($scope.rowCollection);
            console.log($scope.rowCollection); // Array of Objects is present
        });
    }
});

}

Then their $request service will call $rootScope.$apply() - see line 110 of,

https://github.com/responsiv/angular-plugin/blob/master/assets/js/angular-bridge.js