Remove item from list angular

Question

I am quite used to the normal MVC server side coding and now I am trying to learn angular. I want to make a user interface where people can add teams to the competition that they signed in to. To remove the teams from the list I am using:

angular.module('Xtho.InschrijfController', [])
.controller("InschrCtrl", [
    '$scope', '$http', function ($scope, $http) {
        $scope.model = {};
        $scope.wedstrijden = {};
        $scope.states = {

        };

        $scope.new = {
            ploeg: {}
        };

        $http.get('/inschrijvingen/IndexVM').then(function (data) {
            $scope.model = data;
        });

        $scope.Vploeg = function (id, index) {
            $http.post('/inschrijvingen/PloegVerwijderen', { id: id }).then(function (response) {
                $scope.model.splice(index, 1);
            });
        };

    }
]);

and this is within the view:

<p>{{ploegen.PloegNaam}} <a href="#" ng-click="Vploeg(ploegen.PloegID, $index)"><span class="fa fa-trash-o" aria-hidden="true"></span></a></p>

The code works! Because the records are deleted from the database, however, they still are in the list shown on the page. The console provides the following error: "n.model.splice is not a function", what is the best way to solve this issue?

Answer 1

Something like this.

angular.module('Xtho.InschrijfController', [])
.controller("InschrCtrl", [
'$scope', '$http', function ($scope, $http) {
    $scope.model = {};
    $scope.wedstrijden = {};
    $scope.states = {

    };

    $scope.new = {
        ploeg: {}
    };

    $scope.load = function(){
        $http.get('/inschrijvingen/IndexVM').then(function (data) {
            $scope.model = data;
        });
    };
    $scope.load();

    $scope.Vploeg = function (id, index) {
        $http.post('/inschrijvingen/PloegVerwijderen', { id: id 
    }).then(function (response) {
            //$scope.model.splice(index, 1);
            $scope.load();
        });
    };

}
]);