title: Show a preview/Edit option before submitting the form using AngularJS
body: <p>I have my html form as shown below:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="form-group" ng-controller="studentController"&gt;
      &lt;form role="form" class="well form-horizontal" id="registerForm" name="forms.registerForm"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="col-md-4 control-label"&gt;First Name &lt;/label&gt;
          &lt;input ng-model="formdata.firstname" required type="text" name="firstname"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="col-md-4 control-label"&gt;Middle Name &lt;/label&gt;
          &lt;input ng-model="formdata.middlename" required type="text" name="middlename" maxlength="1"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="col-md-4 control-label"&gt;Last Name &lt;/label&gt;
          &lt;input ng-model="formdata.lastname" required type="text" name="lastname"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="email" class="col-md-4 control-label"&gt;E-mail address&lt;/label&gt;
          &lt;input ng-model="formdata.email" required type="email"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="col-md-4 control-label"&gt;Student ID&lt;/label&gt;
          &lt;input ng-model="formdata.studentid" required type="number"&gt;
        &lt;/div&gt;
        &lt;div required class="form-group"&gt;
            &lt;label class="col-md-6 control-label"&gt;
                level
            &lt;/label&gt; &lt;br&gt;
          &lt;div class="radio"&gt;
            &lt;label class="col-md-6 control-label"&gt;
              &lt;input type="radio" ng-model="formdata.type" value="300" checked&gt;
              300 &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
            &lt;label class="col-md-6 control-label"&gt;
              &lt;input type="radio" ng-model="formdata.type" value="400"&gt;
              400 &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
            &lt;label class="col-md-6 control-label"&gt;
              &lt;input type="radio" ng-model="formdata.type" value="500"&gt;
              500 &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
            &lt;div class="form-group" align="center"&gt;
        &lt;input type="file" ngf-select ng-model="formdataa.file" name="file" ngf-pattern="'application/pdf'" accept="'.pdf'" ngf-max-size="5MB" required ngf-model-invalid="errorFile"&gt;
  
  &lt;/div&gt;
  &lt;div class="container" align="center"&gt;
          &lt;button class="btn btn-register" ng-click="tempData()" ng-disabled="forms.registerForm.$invalid" &gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Below is the angular javascript code to store the details of the form and the file in the server.</p>
  
  <pre><code>$scope.tempData = function(ev){
          console.log($scope.formdata);
  var confirm = $mdDialog.confirm()
        .title('Are you sure you want to delete this user?')
        .ok('YES')
        .cancel('CANCEL');
          $mdDialog.show({
                  locals:{formdata: $scope.formdata, dataToPassFile: $scope.formdataa}, //here where we pass our data
                  controller: _DialogController,
                  controllerAs: 'vd',
                  templateUrl: 'scripts/app/studentdialog/studentdialog.html',
                  parent: angular.element(document.body),
                  targetEvent: ev,
                  clickOutsideToClose: true
  
              })
              .then(
                  function(answer) {},
                  function() {
  
                  }
              );
      };
  
  function _DialogController($scope, $mdDialog, formdata,dataToPassFile) {
       $scope.closeDialog = function() {
            $mdDialog.hide();
       };
      $scope.firstname = formdata.firstname;
      $scope.lastname = formdata.lastname;
      $scope.middlename = formdata.middlename;
      $scope.studentid = formdata.studentid;
      $scope.email = formdata.email;
      $scope.type = formdata.type;
      $scope.file = dataToPassFile.file;
      console.log('FIle Passed' +dataToPassFile.file);
  $scope.tfile = function () {
          console.log("TFIle Called");
          if ($scope.forms.registerForm.file.$valid &amp;&amp; $scope.formdataa.file) {
              $scope.upload($scope.formdataa.file);
          }
      };
      $scope.upload = function (file) {
              file.upload = Upload.upload({
                  url: $rootScope.baseURL + 'php/uploadT.php',
                  method: 'POST',
                  data: {
                      'file': file,
                      'userId': $scope.formdata.firstname, 
                      'type': $scope.formdata.type
                  },
              });
  $scope.register = function () {
          console.log("clicked");
          $scope.loading = true;
          AppServices.register($scope.formdata)
              .then(function (result) {
                  if (Object.keys(result).length &gt; 0) {
                      // update current users list
                      if (result.type == '300' || result.type == '400') {
                          $scope.users.300.push(result);
                      } else {
                          console.log(result);
                          $scope.users[result.type] = result;
                      }
  
                      $scope.forms.registerForm.$setPristine();
                      $scope.forms.registerForm.$setUntouched();
                      $scope.msg = {};
                      $scope.msg.successRegister = 'Registered Successfully';
                  } else {
                      $scope.msg = {};
                      $scope.msg.errorRegister = 'Email already exists!';
                  }
              })
              .finally(function (data) {
                  $scope.loading = false;
              });
      };
  </code></pre>
  
  <p>When the user clicks on Submit button, I want to create a confirmation page where it will give the user all the details again so the user can confirm and then actually submit the form. Kindly let me know how can I use localStorage for storing and retrieving the data at the same time for confirm page.
  Thank you in advance!</p>
  
  <ul>
  <li>UPDATE: I created a MDDialog and calling it when the button is clicked,I can see all the data as well in MDDialog now. When user clicks on OK, I want the data on the page(not the data on the MDDialog) to be submited in the backend(php), how can I do that?</li>
  </ul>