AngularJS data binding with passed parameter

Question

Form:

<form novalidate name="form" ng-submit="addArticle(newPost)">
    <textarea ng-model="newPost.content" required></textarea>
    <button type="submit" ng-disabled="form.$invalid">
</form>

Controller:

angular.module('app').controller('StreamDetailCtrl', function($scope) {
    $scope.newPost = {};

    $scope.addArticle = function(newPost) {
        // [Post stuff to server]

        // Clear form
        newPost = {};
    };
});

The problem here is that the form isn't cleared, there is no data binding going on. Obviously if I would do $scope.newPost = {}; inside the method it works fine, but I can't use that (the real code has this addArticle method inside a different service, so I need to pass the newPost to it).

How can I bind this newPost parameter so that changing it changes my form?

Answer 1

You can try either:

• newPost.content = null, if you only want to clear this property
• angular.copy({}, newPost) will clear everything inside newPost (if you want to clean all properties)