In other parts of my application, I have a similar code snippet that works perfectly fine.
The issue arises when pushing an object into an empty array and using ng-repeat in the view.
This is the JavaScript code:
$scope.upload = $upload.upload({
url: BASE + 'files/tasks',
file: file,
data: data
}).success(function(data) {
for(var i = 0; i < $scope.case.task.notes.length; i++) {
if($scope.case.task.notes[i].in_api === false) {
$scope.case.task.notes[i].documents.push(data);
}
}
});
After adding the JSON response to the array and logging $scope.case.task.notes, the expected result is seen (note object with the documents array including the returned object).
In the view, the HTML below utilizes Angular templating:
<div>
<p class="chat-file row" ng-repeat="document in note.documents track by $index">
<b class="pull-left col-sm-6">
<i class="fa fa-file"></i> {{document.name}}
</b>
<span class="col-sm-6 pull-right">
<a href="http:/download.com?f={{document.id}}&n={{document.name}}" class="btn btn-xs btn-success">download</a>
</span>
</p>
</div>
Initially, when loading the page, notes with documents display correctly. However, upon calling the success function from the upload operation above, new documents pushed onto the note's array do not appear in the view.
It should be noted that the surrounding HTML is also within an ng-repeat iterating over every note (multi-level structure).
What could possibly cause this issue? The JavaScript functions as intended but the view does not reflect changes in the model.