Why will my data not save my updated scope data from my form?

Question

I have created a form in a modal which allows someone to enter in plan details. I have then created the scope form in ng-model attribute as you can see below...

<form>
    <div class="form-group">
        <label>{{plans.title}}</label>
        <input type="text" name="title" ng-model="plans.title" class="form-control" placeholder="Enter Title" required />
    </div>
    <div class="form-group">
        <label>{{plans.overview}}</label>
        <textarea name="overview" ng-model="plans.overview" class="form-control" placeholder="Overview/Purpose" required />
    </div>
    <div class="form-group">
        <label>{{plans.notes}}</label>
        <textarea name="notes" ng-model="plans.notes" class="form-control" placeholder="Plan Notes" required />
    </div>
    <div class="form-group">
        <label>{{plans.visualplan}}</label>
        <div class="button" ngf-select ng-model="plans.visualplan" name="visualplan" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" >Upload Visual Plan</div>
    </div>
    <div class="form-group">
        <button type="submit" ng-click="submit()" Value="Post">Post</button>
    </div>
</form>

In my code I am then trying to pull the data from the form into my scope object for plans under title, overview, notes and visualplan. Then i have coded this to upload the data from the form into my firebase json. However upon submitting the details, the upload to json process works correctly, but it is uploading the default values for title, overview, notes and visualplan which i have initiatlly set in my dailyplans.js file. What i want to upload is the details which I have attached through ng-model instead of the initial set values. Can anyone spot what I am doing wrong?

Below is my js file.

$scope.submit = function() {
    $scope.plans = {
        title: 'title',
        overview: 'overview',
        notes: 'notes',
        visualplan: 'visual plan'
    }
    if (authData) {
        ref.child('teaching-plans').child('teaching-plans' + authData.uid).set($scope.plans).then(function(authdata) {
            console.log('successful');
        }).catch(function(error) {
            console.log(error);
        });
    }
}

Answer 1

You are resetting the plans object when user clicks on submit. Ideally it should be outside of submit method.

This is how you should do it

$scope.plans = {
    title: 'title',
    overview: 'overview',
    notes: 'notes',
    visualplan: 'visual plan'
}
$scope.submit = function(plans) {

    if (authData) {
        ref.child('teaching-plans').child('teaching-plans' + authData.uid).set(plans).then(function(authdata) {
            console.log('successful');
        }).catch(function(error) {
            console.log(error);
        });
    }
}

And also update the html as

<div class="form-group">
        <button type="submit" ng-click="submit(plans)" Value="Post">Post</button>
    </div>

Hope this helps.