Currently, I am utilizing the Twitter stream API to fetch tweets based on specific hashtags. To achieve this, my server leverages an IO socket through which the client receives incoming messages:
socket.on('tweet', function(msg) {
console.log(msg);
$scope.streaming.push(msg);
});I also ensure to store these messages in a table named 'streaming'. For rendering them on the HTML page, I employ the ng-repeat directive:
<table class="table table-bordered table-hover table-striped">
<tr ng-repeat="tweet in streaming">
<td>
<div class="col-lg-2">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
<div class="col-lg-10">
{{tweet}}
</div>
</td>
</tr>
</table>Despite the fact that the table initially loads empty and populates as new tweets arrive, there aren't any visible changes on the page until the server is stopped.
What could be causing this behavior?