I've encountered an issue while developing an AngularJS app that fetches data from the Firebase cloud. The data is successfully displayed on the page, however, during debugging of my controller, I noticed that the variable appears to be empty. Why is this happening?
Below is the snippet of my controller:
appMainModule.controller('GetCtrl', ['$scope', '$firebaseArray', function ($scope, $firebaseArray) {
var firebaseObj = new Firebase("URL")
debugger;
//var sync = $firebaseArray(firebaseObj);
//$scope.articles = sync.$asArray();
$scope.articles = $firebaseArray(firebaseObj);
var firebaseObj1 = new Firebase("URL");
$scope.articles1 = $firebaseArray(firebaseObj1.orderByChild("Month").equalTo("Apr-2016"));
var query=$scope.articles1
var num = query.length;
}]);
And here is my HTML code:
<div class="content" style="height: 380px; overflow: auto;">
<table class="table">
<thead>
<tr>
<th>Incident Name</th>
<th>Category</th>
<th>Month</th>
<th>Total</th>
</tr>
</thead>
<tbody ng-repeat="article in articles1 ">
<tr>
<td><p>{{article.IncidentName}}</p></td>
<td><p>{{article.CategoryParent}}</p></td>
<td><p>{{article.Month}}</p></td>
<td><p>{{article.Total}}</p></td>
</tr>
</tbody>
</div>
While the HTML page shows the correct articles1 data, the controller displays it as empty after fetching.