I am facing an issue with my Angular application where I cannot get the results of a second $resource call to update a scoped variable. Initially, I am able to generate the initial view from an Angular $resource call to an external API and display the data. However, when I have a form that runs a function on ng-click which queries the API again, the scoped variable does not update with the new data.
Here is the code snippet from my controller for the initial call:
// Initial weather and geolocation data
var Weather = $resource('http://example.com/:method');
Weather.get({method: 'current'}).$promise.then(function(weather) {
// Success
$scope.weather = weather.weather;
$scope.geolocation = weather.location;
}, function(error) {
// Failure
$scope.weather = error;
});
The initial call works fine and I can display the JSON data in the view using {{ weather.currently.temp }} as well as the data in the {{ geolocation }} variable.
However, when I try to make another request to the API upon form submission, the scoped variable does not update:
// Search functionality
$scope.weatherLookup = function(query) {
$http.get('http://example.com/location/' + query).then(function (value) {
$scope.weather = value;
});
};
Even though the API returns valid JSON data in the value, the $scope.weather variable does not update in the view when calling $scope.weatherLookup.
I need help figuring out how to assign the value returned by the API to the $scope.weather inside the $scope.weatherLookup function so that it updates the value and reflects in the view.