Hide form on submit with Angular JS

Question

Trying to wrap my head around some Angular items and working thru a tutorial to edit and learn.

Clicking the below button shows the below form. How do I reverse this once the form is submitted? Meaning hiding the form on submit until the button is clicked once more.

<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-primary">
    <i class="fa fa-plus"></i>Add Task
</button>

Basically, the form appears, I enter something and submit, but would like the form to dissapear upon submit? Thinking something to do with ng-hide, but can I do this using only Angular? Or do I need to do something with javascript/css?

<div id="addForm" class="margin-full-5">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newTaskForm" class="add-task">
    <div class="form-actions">
        <div class="input-group">
            <input type="text" class="form-control" name="comment" ng-model="taskInput" placeholder="Add New Task" ng-focus="addNewClicked">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit" ng-click="addTask(taskInput)">
                    <i class="fa fa-plus"></i>&nbsp;Add Task
                </button>
            </div>
        </div>
    </div>
</form>

Answer 1

You can also achieve this using a combination of Angular form's attribute $submitted, ng-hide and ng-submit

<form name="myForm" ng-hide="myForm.$submitted" ng-submit="submit()">
    <button>Submit</button>
</form>

Read about it here: https://docs.angularjs.org/api/ng/type/form.FormController