Having trouble with my AngularJS push option. Can someone kindly point out where I may be making a mistake and suggest a solution? I've only been learning this language for a week so please bear with me if the error seems trivial.
Thank you
<body ng-app="app" ng-controller ="Ctrl">
<style>
.alert{
color: crimson;
font-size: 19px;
}
.form{
width: 72%;
margin-left: 12%;
border: 2px solid gold;
}
</style>
<script>
var app = angular.module("app", []);
app.controller("Ctrl", function ($scope) {
$scope.main = [{"ngmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a6e9b1a6a9afa6aba687a2b1aeabe9a4a8aa">example@example.com</a>", "pass": "thor", "cpass": "thor"}];
$scope.add = function ($scope) {
$scope.main.push($scope.sf);
};
});
</script>
<div>
<div>
<form name="regform" class="form-horizontal" role="form" style="margin: auto;">
<div class="form-group">
<label class="control-label col-sm-2" for="email3">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" placeholder="Enter email" id="email3" name="email" ng-model="sf.ngmail" required/>
<span class="alert" ng-show=" regform.email.$touched && regform.email.$error.required"> Required</span>
<span class="alert" ng-show="!regform.email.$error.required && (regform.email.$touched && regform.email.$invalid)"> Invalid Email</span>
</div>
</div>
<!-- More form elements go here -->
</form>
</div>
</div>
<br>
<div>
<table border="1">
<thead>
<tr>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="m in main">
<td>{{m.ngmail}}</td>
<td>{{m.pass}}</td>
</tr>
</tbody>
</table>
</div>
</body>