How to use md dialog with input form in angularjs?

Question

i have a problem with material md dialog. This is a codepen (http://codepen.io/anon/pen/EyxyXj) of my application. When i open the dialog, and then i click on "save", i create a card. Why data in my input form are not save in the card? I think there are some problems with scope. Can anyone help me?

.then(function(answer) {
      questList.allsQ.push({
         titolo: questList.titolo ,
         capitolo: questList.capitolo,
         descrizione: questList.descrizione,
         importo: questList.importo,
         data: questList.data
      });
      questList.titolo = '';
      questList.capitolo = '';
      questList.descrizione = '';
      questList.importo = '';
      questList.data = '';
}

The function "push" works, but all the properties are undefined after I clicked save. Thank you everyone.

Answer 1

Correct your input field's ng-model on html as below

<md-input-container class="md-block" flex-gt-xs="">
    <label>Titolo</label>
    <input ng-model="questList.titolo"  size="30" placeholder="inserisci il titolo">
</md-input-container>

You need to pass your data you updated in model to hide() function as below.

  .controller('DemoCtrl', function($scope, $mdDialog, $mdMedia) {
    $scope.status = '  ';
    var questList = this;
    questList.allsQ = [];
    questList.openDialog = function($event) {
      $mdDialog.show({
        controller: function ($timeout, $q, $scope, $mdDialog) {
                var quest =this; 
                // you will be returning quest

                $scope.cancel = function($event) {
                $mdDialog.cancel();
                };
                $scope.finish = function($event) {
                $mdDialog.hide();
                };
                $scope.answer = function() {
                //pass quest to hide function.
                $mdDialog.hide(quest);
                };
                },
        controllerAs: 'questList',
        templateUrl: 'dialog.tmpl.html',
        parent: angular.element(document.body),
        targetEvent: $event,
        clickOutsideToClose:true,
         locals: {parent: $scope},
      })
     .then(function(quest) {

      //here quest has data you entered in model
      questList.allsQ.push({
         titolo: quest.titolo ,
         capitolo: quest.capitolo,
         descrizione: quest.descrizione,
         importo: quest.importo,
         data: quest.data
      });
      questList.titolo = '';
      questList.capitolo = '';
      questList.descrizione = '';
      questList.importo = '';
      questList.data = '';
      console.log(questList.allsQ);
      console.log(questList.allsQ.length);
    });
    };
  });

Answer 2

The answer I am going to provide is definitely not the best answer but it is something that it works

remove the ng-submit from the md-dialog template on the Salva button add an ng-click="answer(questList)" and do your push like this

  questList.allsQ.push({
     titolo: answer.titolo ,
     capitolo: answer.capitolo,
     descrizione: answer.descrizione,
     importo: answer.importo,
     data: answer.data
  });

there is the example i forked your codepen

http://codepen.io/tougo/pen/QEWGKv