I am completely perplexed. Why doesn't my ng-repeat update when there is an ajax call that changes its value? I have searched through many questions and answers here, but none of them address the issue with the ajax call.
Here is the HTML:
<div class="row" ng-controller="EntryCtrl">
<div id="treeview" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<ul>
<li ng-repeat="root in rootEntry">{{root.Name}}</li>
</ul>
</div>
</div>
And here is the JavaScript:
function EntryCtrl ($scope, $http) {
$scope.rootEntry = [];
$http.get('read/root').success(function(root) {
$scope.rootEntry = root;
console.log($scope.rootEntry);
});
}
Even though the console logs an array returned from the server, the list in the html does not get updated. When I tried to use $scope.$apply, it resulted in an error related to $digest.
Console Output:
[Object]
0: Object
Attributes: null
Id: "534580464aac494e24000001"
Name: "Registry"
Path: ""
__proto__: Object
length: 1
__proto__: Array[0]
It seems to be an issue with the structure of root returned by the server. Could it be a problem with data type because it's an Object instead of an Array? I am using Golang as the server and using json.Marshal() to package data from MongoDB.
Update:
function EntryCtrl ($scope, $http) {
$scope.rootEntry = [];
$http.get('read/root').success(function(root) {
$scope.rootEntry = root;
console.log($scope.rootEntry);
});
console.log($scope.rootEntry);
}
The output here is []. This could be due to the asynchronous nature of $http calls, so could this be the reason?
Final Update:
I have figured out why. The issue was caused by a plugin called jsTree, which alters the appearance of nodes, causing the inserted node to be overwritten.
Thank you everyone for your help.