Add data from GET-request to table in HTML using ng-repeat - html

Question

I'm having trouble with adding rows to a table in my HTML, which comes from an array containing objects.
When I run my code I do a $get request like so:
var app = angular.module('TM', []);
app.controller('tableController', function($http){
this.protocolList = [];
// Initialise array
$http.get('../protocols').success(function(data) {
console.log('Success ' + data);
this.protocolList = data;
angular.forEach(this.protocolList, function(value, key) {
console.log(key + ': ' + value.id + ' - ' + value.name);
});
})
.error(function(){
console.log('Error ' + data)
});
});
When I open up my web browser, I see the following:
My problems occure when I try to add this to a table in my HTML-file:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="c in tctrl.currentDataObject.tableColumns"> {{ c }} </th>
</tr>
</thead>
<!-- This does not ouput anything...-->
<tbody>
<tr ng-repeat="(key, value) in tctrl.protocolList">
<td> {{ value }} </td>
</tr>
</tbody>
</table>
Any help will be much appreciated.

Answer 1

U don't need to inject $scope like this to get access to the DOM??
app.controller('tableController', function($scope,$http){
Im not sure if it is implicit.

Answer 2

Try this simple example:
app.controller('tableController', ['$scope', '$http', function($scope, $http){
$scope.protocolList = [];
// Initialise array
$http.get('../protocols').success(function(data) {
console.log('Success ' + data);
$scope.protocolList = data;
})
.error(function(){
console.log('Error ' + data)
});
}]);
HTML:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="c in tctrl.currentDataObject.tableColumns"> {{ c }} </th>
</tr>
</thead>
<!-- This does not ouput anything...-->
<tbody>
<tr ng-repeat="item in protocolList">
<td> {{ item.id }} </td>
<td> {{ item.name }} </td>
</tr>
</tbody>