I am struggling to create a model in Angular. The model is basically a parent child relationship like a ul => li relationship I have successfully bound the parent JSON array to the $scope.parents variable, and I can ng-repeat over the parent variables. However when i go to add children to the $scope.parents.children from a promised result, i get nothing in the view.
My controller code is as follows:
departmentModule.controller("departmentController", function ($scope, departmentService) {
$scope.parents = [];
$scope.tempArr = [];
//Load initial root/parent structure departmentService.getParents(getSelectedEventId()).then(function (result) { $scope.parents = result; $scope.bindChildNodes() }); //loop through parent structure and get child nodes 1 level deep for initial load $scope.bindChildNodes = function () { for (var i = 0; i < $scope.parents.length; i++) { var assignmentId = $scope.parents[i].ID; $scope.parents[i].children = []; departmentService.getChildren(getSelectedEventId(), assignmentId).then(function (result) { //i would send result to children here, but this function doesnt have access to the i var to know what parent the children belong too.. $scope.tempArr = result; }); $scope.parents[i].children = $scope.tempArr; } } });
When i assign the $scope.tempArr to the children property of its parent: $scope.parents[i].children It somehow loses its value - so a console.log of $scope.parents[0].children is an empty array. Any ideas or help with this one? Why cant I assign a JSON object to a child property of a scope variable? Simple Plunkr simulation is here Thanks so much in advance.