Unable to fetch form data in controller using angularjs? - angularjs

Question

I am new to angularjs. So from YouTube, I am trying to develop my first angularjs application. But I was stuck at the 25th minute of the video where the tutor basically trying to bind the Save user button with the controller and he is able to do so. The data is submitted to the controller in form of array. But when I am trying to do the exact same thing, I am getting an empty array. Why?
JS version:- bootstrap-3.3.7 with angularjs 1.6.4
index.html
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Users Registration</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Username</label>
<div class="col-sm-10">
<input type="email" class="form-control" ng-model="newuser.username">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" ng-model="newuser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Full Name</label>
<div class="col-sm-10">
<input type="email" class="form-control" ng-model="newuser.fullname">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveuser()" data-dismiss="modal">Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
my app.js is
var myApp = angular.module('myApp',[]);
myApp.controller('myController',function($scope){
console.log("My controller");
$scope.newuser = {};
$scope.users = [
{username:"Satya",fullname:"Satya",email:"satya#gmail.com"}
];
$scope.saveuser = function(){
$scope.users.push($scope.newuser);
$scope.newuser = {};
};
});

Answer 1

You can try to pass the user as an argument to the function:
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveuser(newuser)" data-dismiss="modal">Save</button>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('myController',function($scope){
$scope.newuser = {};
$scope.users = [
{username:"Satya",fullname:"Satya",email:"satya#gmail.com"}
];
$scope.saveuser = function(newuser){
$scope.users.push(newuser);
$scope.newuser = {};
};
});

Answer 2

Okay, it's my mistake. Apparently, the input type should be text type. In my HTML file, I kept it as email type. Changing that resolve the problem. I am not sure but this might be bootstrap which validates the form data before processing.