Smart-Table - AngularJs - Wrap within a directive - angularjs

Question

I'm very new to AngularJs and trying to "wrap" the Smart-Table plugin inside a directive.
I can get the rows but the pagination is not showing
Currently this is what I did.
app.directive('grid', [ function () {
return {
restrict: 'E',
replace: true,
template: function (element, attrs) {
return '<table class="table table-striped">'
+ '<thead>'
+ ' <tr>'
+ '<th st-ratio="20" st-sort="Team">Team</th>'
+ '<th st-ratio="20" st-sort="TeamFreq">Team Freq</th>'
+ '<th st-ratio="10" st-sort="TeamSac">Team Sac</th>'
+ '<th st-ratio="30" st-sort="Priority">Priority</th>'
+ '</tr>'
+ '</thead>'
+ '<tbody>'
+ '<tr ng-repeat="row in dataset">'
+ ' <td>{{row.firstName}}</td>'
+ '<td>{{row.lastName | uppercase}}</td>'
+ '<td>{{row.age}}</td>'
+ '<td>{{row.email}}</td>'
+ '</tr>'
+ '</tbody>'
+ '<tfoot>'
+ '<tr>'
+ '<td colspan="4" class="text-center">'
+ '<div class="pagination pagination-xs m-top-none pull-right" st-pagination="1" st-items-by-page="itemsByPage" st-displayed-pages="4"></div>'
+ '</td>'
+ '</tr>'
+ '</tfoot>'
+ '</table>';
},
scope: {
},
controller: function ($scope) {
},
link: function (scope, elem, attrs) {
var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'], familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '##whatever.com',
balance = Math.random() * 3000;
return {
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
}
scope.rowCollection = [];
for (var j = 0; j < 10; j++) {
scope.rowCollection.push(createRandomItem());
}
scope.dataset = [].concat(scope.rowCollection);
}
};
}]);
My html contains this tag
<grid st-table="dataset"></grid>
This code is just a test, the data will be passed using a service.. and the template will be dynamic.
I need some help :-)
Thanks

Answer 1

I couldn't get the pagination to show when I was using smart-table in a directive the other day. Turns out it had nothing to do with the directive and I just pulled/updated to the very latest version of smart-table from GitHub and it all worked. I started looking at the what had changed but got side tracked and moved onto something more productive, happy that it was now working.
Version I have that appears to be working fine is tagged 1.4.2.
With dynamic data from a service, however, I think you're going to need to look at the st-safe-src attribute too. Although I'm new to this whole Angular / smart-table business too.

Answer 2

I believe you have to match the st-table value and the st-pagination value to get the pagination to show.