ng-repeat not updating the list when adding data

Question

my problem is that the ng-repeat is not updating automatically the data. When I press add pin in my code, the element is added correctly to the database. If I reload the page th

Answer 1

First of all, you should really use $scope (Doc) in your controller. You can read more about the differences in this post.

Thus your controller would look like this.

app.controller("AppCtrl", ["$scope", "$http",
                           function ($scope, $http) {

    $http.get("/api/pin").success(function (data) {
        $scope.pins = data.objects;
    });

    $scope.addPin = function () {
        ....
    };

    $scope.deletePin = function (pin) {
        ....
    };

    $scope.updatePin = function (pin) {
        ....
    };
}]);

HTML:

    Add Pin
    

        
        

            
            Update
            Delete
        
    

Finally, here comes the core part. You should call $apply (Doc) when your models change. You can read more in this blog post.

$http
    .post("/api/pin", {
        title: "new",
        image:
            "http://placekitten.com/200/200/?image="
                + $scope.pins.length
    })
    .success(function(data) {
        $scope.$apply(function() {
            $scope.pins.push(data);
        });
    });

Thus, the full controller code:

app.controller("AppCtrl", ["$scope", "$http",
                           function ($scope, $http) {

    $http.get("/api/pin").success(function (data) {
        $scope.pins = data.objects;
    });

    $scope.addPin = function () {
        $http
            .post("/api/pin", {
                title: "new",
                image:
                    "http://placekitten.com/200/200/?image="
                        + $scope.pins.length
            })
            .success(function(data) {
                $scope.$apply(function() {
                    $scope.pins.push(data);
                });
            });
    };

    $scope.deletePin = function (pin) {
        $http
            .delete("/api/pin/" + pin.id)
            .success(function(response) {
                $scope.$apply(function() {
                    $scope.pins.splice(
                        $scope.pins.indexOf(pin), 1
                    );
                });
            });
    };

    $scope.updatePin = function (pin) {
        $http.put("/api/pin/" + pin.id, pin);
    };
}]);