I have few input fields like "Title" "firstname" "lastname" and "date" whose data I'm storing in an Object but I want to create an array of object for this data, so that every time I click submit button a new object should be pushed in the array.
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Angular Basic</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css"> </head> <body ng-controller="myCtrl"> <form> <md-input-container> <label>Title</label> <input ng-model="user.title"> </md-input-container> <md-input-container> <label>First Name</label> <input ng-model="user.first_name"> </md-input-container> <md-input-container> <label>Last Name</label> <input ng-model="user.last_name"> </md-input-container> <md-input-container> <label>Enter date</label> <md-datepicker ng-model="user.submissionDate"></md-datepicker> </md-input-container> <md-button class="md-raised md-warn" ng-click="saveData()">Submit</md-button> </form> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script> <script src="app.js"></script> </body> </html> JS file:
var app = angular.module('myApp', ['ngMaterial']).controller('myCtrl', function ($scope) { $scope.user = {} var userArr = []; $scope.saveData = function () { console.log("user", $scope.user) userArr.push(user); console.log(userArr); } }) 
userArr.push($scope.user);you should do like this...