Flask API data not showing in AngularJS frontend despite successful backend response

Backend
1

I’m building a single page application with AngularJS frontend and Flask backend connected to MongoDB. My problem is that data from the Flask API shows up in browser console but won’t render in the HTML template.

When I test with hardcoded JSON arrays in my service, everything displays perfectly. But when I fetch real data from my Flask endpoint, the view stays empty even though the HTTP request succeeds.

The Flask endpoint responds correctly when I test it with curl commands. I can see the data object in console logs but it just won’t appear on the page.

.controller('articleCtrl', function(articles, $scope){
    "use strict";
    var ctrl = this;
    
    ctrl.articles = articles.fetchArticles();
})

.factory('articles', function(apiService){
    "use strict";
    var articles = {};
    articles.list = apiService.data;
    
    articles.fetchArticles = function(){
        articles.list = apiService.retrieveData();
    };
    
    articles.createArticle = function(heading, content){
        apiService.sendData(articles.list.push({heading: heading, content: content}));
    };
    
    return articles;
});

.factory('apiService', function($http, $log){
    "use strict";
    
    var service = {};
    
    service.retrieveData = function(){
        $http({
            method: 'GET',
            url: '/api/articles',
            headers: {'Content-Type': 'application/json'}
        }).then(function(result){
            $log.info("API response:", result);
            service.data = result.data;
            $log.info("Parsed data:", service.data);
        }, function(error){
            $log.error("Request failed:", error);
        });
    };
    
    service.sendData = function(payload){
        $http({
            method: 'POST',
            url: '/api/articles',
            data: payload
        }).then(function(result){
            $log.info("POST successful:", result);
        }, function(error){
            $log.error("POST failed:", error);
        });
    };
    
    return service;
});

<div class="content-wrapper">
    <div class="article-card" ng-repeat="item in ctrl.articles">
        <h3 class="article-heading">{{item.heading}}</h3>
        <p class="article-content">{{item.content}}</p>
        <button class="btn btn-primary">Vote Up</button>
        <button class="btn btn-secondary">Reply</button>
    </div>
</div>

Any ideas what could be causing this issue?

2

Your service architecture is broken. The fetchArticles() function isn’t returning the promise from retrieveData(), and retrieveData() isn’t returning the HTTP promise either. I hit the same wall when I started with AngularJS promises. You’ve got to chain them properly so your controller can actually wait for the async stuff to finish. Fix apiService.retrieveData() by adding return $http({...}) at the start. Then make articles.fetchArticles() return the promise: return apiService.retrieveData().then(function(){ return articles.list; });. In your controller, handle it like this: articles.fetchArticles().then(function(data){ ctrl.articles = data; });. That way your view only updates once the data actually comes back from Flask.

3

your fetchArticles() function isn’t returning anything to the controller. the async call updates service.data but that won’t automatically update ctrl.articles. try returning the promise or use a callback to update the scope when the data comes back.

4

this looks like a timing issue. your controller’s running before the api call finishes, so ctrl.articles ends up undefined. try adding $scope.$apply() after you set service.data in the promise callback, or just handle promises properly like owen said.