如何使用AngularJS将页面设置还原为默认设置

我有一个html页面，其中有几个angularJS组件和几个设置。我计划在下面实现一个取消按钮，以便一旦用户单击按钮，整个设置被清除并恢复到原始状态。我在这里使用Django框架。我如何使用angularJS做到这一点?提前感谢。

以下是我的代码:

    <table class="table">
        {% verbatim %}
        <tr>
            <td class="input-group" ng-repeat="(k,v) in alerts">
                <span class="input-group-addon" ng-hide="v.hide">Check {{ k }}</span>
                <span ng-hide="v.hide">
                <input type="text" class="form-control" placeholder="Add Check here" ng-model="v.input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b>Functional check</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="{{ k }}" value="fc" ng-model="v.props">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b>CFM issue</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="{{ k }}" value="cfm" ng-model="v.props">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b>Defect risk</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="{{ k }}" value="dr" ng-model="v.props">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="" ng-click="remove(v)">
      <span class="glyphicon glyphicon-trash"></span></a>
                    </span>
                    <!--<a href="" ng-click="remove(v)">remove</a></span></td>  </tr>-->
        {% endverbatim %}
        <tr>
            <td>
                <button type="button" class='btn btn-info' ng-click="addAlert()">
                    <span class="glyphicon glyphicon-plus"></span>
                    &nbsp;Add Check</button>
            <button type="reset" ng-click="reset()" class="btn btn-danger">
                <span class="glyphicon glyphicon-repeat"></span>
                &nbsp;Reset</button>
        </td>
        </tr>
    </table>
</div>
<table class="table">
    <!--IMPORT FILE-->
    <tr>
        <td>
            <div style="position:relative;">
                <a class='btn btn-primary' href='javascript:;'>
                    Choose File...
                    <input type="file" style='position:absolute;z-index:2;top:0;left:0;
                    filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                    opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
                </a>
                &nbsp;
                <span class='label label-info' id="upload-file-info"></span>
                <button ng-click="uploadAttachFile()" class="btn btn-small btn-default" id="uploadfile" name="uploadfile">
                    <span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;Import File</button>
            </div>
        </td>
    </tr>
    <!--ADD COMMENTS-->
    <tr>
        <td>
            Add Comments*<h4><input type="text" class="form-control" placeholder="Comments here">
        </h4>
        </td>
        <td>
            Add xx<h4><input type="text" class="form-control" placeholder="Add xx here">
        </h4>
        </td>
    </tr>
    <tr>
        <td>
            <button class="btn btn-small btn-success"><span class="glyphicon glyphicon-pencil"></span>&nbsp;Update check DB</button>
            <button class="btn btn-small btn-warning"><span class="glyphicon glyphicon-remove"></span>&nbsp;Cancel</button>
        </td>
</table>

和我的JS:

{{ ngapp }}.controller("AlertDemoCtrl", function ($scope, $http){
$scope.alerts = [];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!', props : 0, input : ""});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
$scope.reset = function() {
angular.forEach($scope.alerts, function(v){
v.input = "";
v.props = 0;
});
};
$scope.remove = function(v){
    v.hide = 1;
  }
$scope.reset();
});