AngularJs interval only shows {{name}}

Question

I'm trying to get a list of all the 'cashflow' objects in my django application by calling a AngularJS get function every 5 seconds. I run the function with $interval(getCashflows, 5000); in my js file and try to display it in my html as [[getCashflows]] (see interpolateprovider)

Now the only thing I get is "[[getCashflows]]" in my html.. does interpolateProvider not work or do I need to call it differently?

 app = angular.module("coco",[]);

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

app.controller('cocoCtrl',['$scope','$http', function($scope) {

    $scope.save = function (cashflow) {
        var dataObj = {
                value : cashflow.value,
                date : cashflow.date,
        };
        $.ajax({
            url : "/create_cashflow/", // view functie
            type : "POST",
            data : dataObj,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            success : function(json) {
                $(".data").prepend("<li><strong>"+json.value+"</strong> - <em> "+json.date+"</em></li>");

            }
        });
    }

}]);

app.controller('cocogetCtrl',['$scope','$http', function($scope,$http, $interval) {

    $scope.cashflows = "";
    $interval($scope.getCashflows = function() {
        return $http.get("/get_cashflows/", {data:data}).then(function(response) {
            $scope.cashflows = "test";
            alert(response.toString());
            $(".flows").prepend("<li><strong>"+json.value+"</strong> - <em> "+json.date+"</em></li>");
            return response.toString();

        });
    }, 5000);
}]);

Answer 1

Your problem is almost certainly that you are attempting to update an angular scope variable from a jQuery callback. Angular only checks for changes to the scope inside its own digest loops and the callback will happen outside that context so angular doesn't see the change.

The simple fix is to stop using $.ajax() calls and start using the $http service that you have already included in your controller.

However it isn't at all clear what you expect to see in your html. The function getCashflows isn't returning a value, either as written or indeed if you rewrite it to use $http . The value is retrieved from the server asynchronously. You should change it so that the scope value is a promise which resolves to the expected value. As $http already returns a promise it should be sufficient to do something like:

function getCashflows() {
   $scope.cashFlows = $http.get("/get_cashflows/", {data:data})
   .then(function(response) {
       return response.data;
   });
}

The change your html to interpolate the value cashFlows instead of the function.

There is probably no reason for getCashflows itself to be exposed to the scope, you could just make it an ordinary function which will have the side effect of fixing the call to $interval that will currently just cause the javascript to stop due to an unresolved name.