I'm encountering an issue where the DOM is not updating when I make a $http request in a jQuery function call.
Please take a look at the Plunker
In my code script.js, for testing purposes, I have $scope.components defined both globally and within a function. However, everything works fine when I hardcode the JSON value into the global variable. The problem arises when I fetch the JSON as a $http response; the expand and collapse functionality of the tree structure stops working.
Below is the section of code handling the $http request:
$scope.init = function init() {
$http.get('treeData.json').success(function(data) {
$scope.components = data;
}).error(function(data) {
});
};
Please help me identify what might be going wrong here.