I'm attempting to monitor a change in value retrieved from a factory using $http.
Below is my factory, which simply retrieves a list of videos from the backend:
app.factory('videoHttpService', ['$http', function ($http) {
var service = {};
service.getEducationalVideos = getEducationalVideos;
return service;
function getEducationalVideos() {
return $http({
url: 'api/video/educational',
method: 'GET'
}).then(function (result) {
return result.data;
});
}
}]);
Here's my controller:
app.controller('videoCtrl', ['$scope', 'videoHttpService',
function ($scope, videoHttpService) {
videoHttpService.getEducationalVideos().then(function (result) {
$scope.educationalVideos = result;
});
$scope.$watch($scope.educationalVideos, function (newValue, oldValue) {
console.log(oldValue, newValue);
if (newValue !== oldValue) {
$scope.educationalVideos = newValue;
}
});
}]);
Unfortunately, this isn't working as expected. The console.log shows undefined, undefined.
Can anyone provide insight into what I might be doing incorrectly?