AngularJS: Not able to store data to an object - angularjs

Question

I'm trying to store captured data from the form in an object using angular-material for dialog box with the form to capture.
Related part of the controller looks like
$scope.attendees = [{
firstName: "",
lastName: "",
email: "",
phone: ""
}];
$scope.addAttendee = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'views/regForm.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
})
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.saveAttendee = function(attendee) {
str = JSON.stringify(attendee, null, 4);
$mdDialog.hide(attendee);
console.log('Attendee ' + str);
$scope.attendees.push(attendee);
console.log('Attendees ' + $scope.attendees);
};
}
Output for Attendee is correct but later it crashed on push(attendee) as Cannot read property 'push' of undefined or push will overwrite added previously data (based on given answer)
Any tips on that?

Answer 1

Just move the $scope.attendees inside the controller.
function DialogController($scope, $mdDialog) {
$scope.attendees = [{
firstName: "",
lastName: "",
email: "",
phone: ""
}];
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.saveAttendee = function(attendee) {
str = JSON.stringify(attendee, null, 4);
$mdDialog.hide(attendee);
console.log('Attendee ' + str);
$scope.attendees.push(attendee);
console.log('Attendees ' + $scope.attendees);
};
}
What you saying about to send data from controller who calls the mdDialog, a alld a plnkr with a basic example.
example plnkr
cour code modificated should be.
function DialogController($scope, $mdDialog, attendees) {
$scope.attendees = attendees;
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.saveAttendee = function(attendee) {
str = JSON.stringify(attendee, null, 4);
$mdDialog.hide(attendee);
console.log('Attendee ' + str);
$scope.attendees.push(attendee);
console.log('Attendees ' + $scope.attendees);
};
}
and in the controller who calls for example
$modal.show({
// configuration like you have.
}).then(function(response){
//when hide the modal
$scope.attendees = response;
});
Check if out if this help.

Answer 2

If someone will need "fixed" code for the dialog box controller is below
var attendee = this;
attendees = [];
$scope.addAttendee = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'views/regForm.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
controllerAs: 'attendee',
fullscreen: $scope.customFullscreen, // Only for -xs, -sm breakpoints.
locals: {parent: $scope}
})
.then(function(response){
attendees.push(response);
console.log(attendees);
console.log(attendees.length);
})
};
function DialogController($scope, $mdDialog) {
var attendee = this;
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.save = function(response) {
$mdDialog.hide(response);
};
}