I am encountering an issue with accessing a scope variable that is defined in a nested $http.get function. The code snippet below pertains to my controller (which is related to a partial $routeProvider).
//Content controller
app.controller('Content', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
$http.get('wp-json/wp/v2/posts?slug=' + $routeParams.slug).success(function(res) {
$scope.post = res[0];
document.querySelector('title').innerHTML = res[0].title.rendered + ' | Going Solo ';
console.log(res);
$http.get('wp-json/wp/v2/posts?filter[artists]=' + $scope.post.pure_taxonomies.artists[0].slug + '&exclude=' + $scope.post.id).success(function(res) {
if (res.length > 1) {
$scope.related = res;
}
else {
$scope.related = res[0];
}
console.log(res);
});
}).error(function(res, status) {
if (status === 404) {
$scope.is404 = true;
document.querySelector('title').innerHTML = 'Page not found | Going Solo';
$scope.errorMessage = 'Error: ' + res[0].message;
}
});
}]);
Essentially, I aim to fetch all the songs associated with the one displayed in my content controller (the first $http.get request). To link these songs, I utilize a custom taxonomy known as "artists". To achieve this asynchronously, I perform a new $http.get request within the initial one. In this request, I filter for the current post's taxonomy slug ($scope.post.pure_taxonomies.artists[0].slug) and add a filter to exclude the post itself by including its ID. The data retrieved from these requests appears correct based on the console log.
The challenge arises when attempting to access the second $http.get request in my partials. When using the ng-repeat directive:
<div ng-repeat="songrel in related">
<div ng-bind-html="songrel.title.extended"></div>
</div>
No content is displayed. It seems that it does not recognize data.related, resulting in the cycle not being entered. What could be causing this issue?