AngularJS: How to post new data to an existing JSON file

I'm pretty new to Angular, so my apologies if I'm missing something very basic here - it's just that I've searched half of the internet already, but I can't seem to find an example or an explanation to help me out.

I've got a JSON file with data (news.json, stored locally for this example):

[
    {
      "id": 1,
      "title": "Het allereerste nieuwsbericht",
      "body": "WE LOVE ANGULAR!!",
      "algemeen": true,
      "leerlingen": true,
      "personeel": true,
      "ouders": true,
      "day": "27",
      "month": "05"
    },
    {
      "id": 2,
      "title": "Het allertweede nieuwsbericht",
      (...)

The HTML template for the form that should submit new entries into the JSON file:

<form ng-submit="submit()">
<label>Titel:&nbsp;&nbsp;&nbsp;</label>
<input type="text" ng-model="title" required /><br /><br />
<label>Tekst:<br /></label>
<textarea ng-model="body" required></textarea><br /><br />
<fieldset>
    <legend>Voor wie is dit nieuwsbericht bestemd?</legend>
    <input type="checkbox" ng-model="at_alg" value="Homepagina">&nbsp;&nbsp;Homepagina<br />
    <input type="checkbox" ng-model="at_lln" value="Leerlingen">&nbsp;&nbsp;Leerlingen<br />
    <input type="checkbox" ng-model="at_per" value="Personeel">&nbsp;&nbsp;Personeel<br />
    <input type="checkbox" ng-model="at_oud" value="Ouders">&nbsp;&nbsp;Ouders
</fieldset><br /><br />
<button type="submit">&nbsp;Sla het artikel op&nbsp;</button>

And the directive itself:

app.directive('postNews', function($http){
        return {
            restrict: 'E',
            scope: {},
            templateUrl: 'pages/postnews.html',
            link: function(scope, element, attrs) {
                $scope.submit = function() {
                    var toSend = {
                        title: $scope.title,
                        body: $scope.body,
                    }

                    $http.post('data/news.json', toSend)
                    .success(function(data, status, headers){
                        alert('Het bericht is toegevoegd.');
                        $scope.title = '';
                        $scope.body = '';
                    })
                    .error(function(data, status, headers){
                        alert('Oeps... er is iets fout gegaan. Probeer het later opnieuw.');
                    });
                };
            }
        };
 });

This doesn't do a thing at all. What am I doing wrong? Thanks in advance!