AngularJS $scope variable only set once through HTTP GET

Question

I have an API that I'm trying to get data from from a separate AngularJS application.

There is a button that I'm using to load in data from the API. When pressed it calls the $scope.getApiData function, which is bound to a variable called $scope.productlist. Each entry has a delete button which calls the $scope.deleteProduct function.

The API is working properly, though it's using ASP.NET 5.

The code called when 'Update' is pressed is also called after a 'Delete' press.

(function () {
'use strict';

angular
    .module('app')
    .controller('Products', main);

main.$inject = ['$scope', '$http'];

function main($scope, $http) {
    $scope.productlist = [];

    // Get products from API
    $scope.getApiData = function () {
        $http({
            method: 'GET',
            url: "http://localhost:65040/api/products",
        }).then(function successCallback(response) {
            $scope.productlist = response.data;
        }, function errorCallback(response) {
            alert('Error');
        });
    };

    // Delete a product
    $scope.deleteProduct = function (idx) {
        $http({
            method: 'DELETE',
            url: "http://localhost:65040/api/products",
            params: { 'id': idx },
        }).then(function successCallback(response) {
            $scope.getApiData();
        });
    };

}

})();

However, when the $scope.getApiData is called a second time--either manually or by deleting an item--it doesn't correctly update the list to reflect the state of the API, even though the correct results are returned in the HTTP response. The list remains the same, and the whole application has to be restarted for it to reflect the data in the API.

HTML:

<table>
    <tr>
        <td>ID</td>
        <td>Item Name</td>
        <td>Price</td>
    </tr>
    <tr ng-repeat="product in productlist">
        <td>{{product.Id}}</td>
        <td>{{product.Name}}</td>
        <td>{{product.Price}}</td>
        <td><button ng-click="deleteProduct(product.Id)">X</button></td>
    </tr>
</table>

<button ng-click="getApiData()">Update</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/main.js"></script>

Having a problems figuring this out. Thanks for reading!

why dont you just remove the item from the array if the callback is sucessful and keep the back independent from the front end? — andresmijares, Dec 03 '15 at 15:28
Is that you full html code. I don't see any **ng-app, ng-controller** in it. — Vivek, Dec 03 '15 at 15:28
@VVK It's not, the editor didn't like the full thing. Here's a screenshot of everything: http://i.stack.imgur.com/Rtij4.png Pastebin: http://pastebin.com/r2bgHER8 — Callum Evans, Dec 03 '15 at 15:35
@andresmijares25 I'll give it a shot. I'd rather understand why the current setup isn't working, though :) — Callum Evans, Dec 03 '15 at 15:36
Sorry I don't have time to look at this in depth but you may want to investigate the order that your promises ($http) are resolved. Your Get may be resolving before your Delete. If so, look into chaining the promises to get them to resolve in the desired order. — jbrown, Dec 03 '15 at 16:11

score 1 · Accepted Answer · edited May 23 '17 at 12:33

It turns out that the request was being cached. I don't know how pretty it is, but adding a unique parameter to the request sorted it out. I found that solution here: Angular IE Caching issue for $http

So my request now looks like

   // Get products from API
    $scope.getApiData = function () {
        $http({
            method: 'GET',
            url: "http://localhost:65040/api/products",
            params: { 'foobar' : new Date().getTime() }
        }).then(function successCallback(response) {
            $scope.productlist = response.data;
        }, function errorCallback(response) {
            alert('Error');
        });
    };

Which works as I wanted.

score 0 · Answer 2 · answered Dec 03 '15 at 15:45

You should put your scripts in head tag and not in body tag.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <title>Products</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/main.js"></script>
</head>
<body ng-controller="Products">
    <table>
        <tr>
            <td>ID</td>
            <td>Item Name</td>
            <td>Price</td>
        </tr>
        <tr ng-repeat="product in productlist">
            <td>{{product.Id}}</td>
            <td>{{product.Name}}</td>
            <td>{{product.Price}}</td>
            <td><button ng-click="deleteProduct(product.Id)">X</button></td>
        </tr>
    </table>

    <button ng-click="getApiData()">Update</button>

</body>
</html>

That wouldn't solve the problem here, and last I heard there are mixed opinions on where script files should go anyway. — Callum Evans, Dec 03 '15 at 15:53

AngularJS $scope variable only set once through HTTP GET

2 Answers2