I have a basic AngularJS 1.7 application where I am successfully fetching data from a web API using an AngularJS service. However, I am running into an issue where the data is not being populated in the controller scope object. I have verified that the data is being retrieved from the database via the Web API while debugging the AngularJS service. I am not sure what I am missing in order to resolve this issue.
Service.js
(function () {
var app = angular.module('myApp');
app.factory('websiteService', function ($http, $q) {
var factory = [];
var deferred = $q.defer();
var baseURI = 'http://localhost:59029/api';
factory.getAllStudents = function () {
$http({
method: 'GET',
url: baseURI + '/Website/GetAllStudents'
}).then(function (response) {
deferred.resolve(response);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
}
return factory;
});
})();
Controller.js
(function () {
var app = angular.module('myApp');
app.controller('websiteController', ['$scope', '$http', 'websiteService', '$filter',
function ($scope, $http, websiteService, $filter) {
$scope.TestWebsite = "TestWebsite";
console.log($scope.TestWebsite);
//GET Students
websiteService.getAllStudents()
.then(function (response) {
$scope.FetchedAllStudents = response;
// ISSUE: DATA NOT POPULATED HERE
}, function (error) {
// error handling here
});
}
]);
})();