how do I add data to angular smart table - angularjs

Question

I have a simple angular smart-table. It loads the data correctly. If i remove some data the table updates correctly, however if I add data, the table doesnt update. Does anybody know what I am doing wrong. Help would be much appreciated!
HTML:
<div class="container">
<!-- Angular Grid -->
<div ng-controller="MainCtrl">
<table st-table="displayedCollection" class="table table-striped" st-safe-src="rowCollection">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.naam}}</td>
<td>{{row.naam2}}</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>
</tbody>
</table>
</div>
<button type="button" id="addData" class="btn btn-success" ng-click="addRandomItem(row)">Add Data</button>
<div ng-show='busy'>Loading data...</div>
</div>
</div>
And the Controller:
(
(function() {
'use strict';
angular
.module('app')
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$state', 'Auth', '$modal', 'scrapeAPI', '$http', '$alert', 'recommendationsAPI', 'Upload'];
function MainCtrl($scope, $state, Auth, $modal, scrapeAPI, $http, $alert, recommendationsAPI, Upload) {
$scope.displayedCollection = [];
$scope.user = Auth.getCurrentUser();
$scope.rowCollection = [];
$scope.recommendation = {};
$scope.recommendations = [];
$scope.recommendationPostForm = true;
$scope.busy = true;
$scope.allData = [];
var i = 0;
var page = 0;
var step = 3;
var data1 = [];
//gets current data
recommendationsAPI.getAllRecommendations()
.then(function(data) {
console.log('looks found ');
console.log(data);
$scope.recommendations = data.data;
for (i = 0; i < $scope.recommendations.length; i++) {
$scope.rowCollection.push($scope.recommendations[i]);
}
$scope.busy = false;
})
.catch(function(err) {
console.log('failed to get looks ' + err);
});
$scope.addRandomItem = function addRandomItem() {
$scope.recommendation = {
naam: 'tje',
naam2: 'tje'
};
$scope.recommendations.push($scope.recommendation);
for (var j = 1; j < $scope.recommendations.length; j++) {
alert ($scope.recommendations[j].guideline);
}
$scope.rowCollection.push($scope.recommendation);
};
// Verwijder recommendation volledig
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
recommendationsAPI.deleteRecommendation($scope.rowCollection[index]._id)
.then(function(data) {
console.log('delete at backend: success');
$scope.rowCollection.splice(index, 1);
});
}
}
}
})();

Answer 1

Your button "addRandomItem" is out of the div which holds your controller, so it can not access its scope
<div class="container">
<!-- Angular Grid -->
<div ng-controller="MainCtrl">
<table st-table="displayedCollection" class="table table-striped" st-safe-src="rowCollection">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.naam}}</td>
<td>{{row.naam2}}</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>
</tbody>
</table>
<button type="button" id="addData" class="btn btn-success" ng-click="addRandomItem(row)">Add Data</button>
</div>
<div ng-show='busy'>Loading data...</div>
</div>