title: Displaying form data immediately on the side after submit - Angularjs
body: <p>I am trying to display one piece of form data, the username, on the right side of the same page the form is present in (without page refresh).  I want this to happen as soon as I hit submit.  For this miniapp, there is no backend (not even local storage).  </p>
  
  <p>The following is the markup for the right-side of the page: 
  The <code>userArray</code> is defined on the scope and has the usernames pushed into it.</p>
  
  <pre><code>    &lt;div class="index-right"&gt;
          &lt;p ng-repeat="user in userArray"&gt;
              {{ user }}
          &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is my main module and controller:</p>
  
  <pre><code>var app = angular.module('myApp', ['ngRoute', 'ui.validate']);
  
  app.controller('MainCtrl', function($scope){
      $scope.userArray = [];
      console.log($scope.userArray);
      $scope.submitForm = function(isValid){
          if(isValid){
              $scope.userArray.push($scope.formData.username);
          }
          console.log($scope.userArray);
      };
  
  });
  </code></pre>
  
  <p>Currently, the usernames aren't showing up on the front page.  Although, they are being pushed into the userArray (I am consoling out the array on the browser).  Any help on how to proceed would be greatly appreciated.  </p>
  
  <p>I am adding the whole index.html here: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Registration&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,700' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
  &lt;/head&gt;
  &lt;body ng-app="practichemApp"&gt;
      &lt;header class="index-header"&gt;&lt;h1&gt;Registration Page&lt;/h1&gt;&lt;/header&gt;
      &lt;hr&gt;
      &lt;div class="index-left" ng-controller="MainCtrl"&gt;
          &lt;form id="index-form" name="practichemForm" ng-submit="submitForm(practichemForm.$valid)" novalidate&gt;
              &lt;!-- USERNAME --&gt;
              &lt;div class="form-group" ng-class="{ 'has-error': practichemForm.username.$invalid &amp;&amp; !practichemForm.username.$pristine }"&gt;
                  &lt;label&gt;Username&lt;/label&gt;
                  &lt;input type="text" name="username" class="form-control" ng-model="formData.username" ng-minlength="3" ng-maxlength="20" required&gt;
                  &lt;p ng-show="practichemForm.username.$invalid &amp;&amp; !practichemForm.username.$pristine" class="help-block"&gt;Username is required&lt;/p&gt;
                  &lt;p ng-show="practichemForm.username.$error.minlength" class="help-block"&gt;Username is too short.&lt;/p&gt;
                  &lt;p ng-show="practichemForm.username.$error.maxlength" class="help-block"&gt;Username is too long.&lt;/p&gt;
              &lt;/div&gt;
              &lt;!-- EMAIL --&gt;
              &lt;div class="form-group" ng-class="{ 'has-error': practichemForm.email.$invalid &amp;&amp; !practichemForm.email.$pristine }"&gt;
                  &lt;label&gt;Email&lt;/label&gt;
                  &lt;input type="email" name="email" class="form-control" ng-model="formData.email" required&gt;
                  &lt;p ng-show="practichemForm.email.$invalid &amp;&amp; !practichemForm.email.$pristine" class="help-block"&gt;Please Enter a valid email.&lt;/p&gt;
              &lt;/div&gt;
              &lt;!-- PASSWORD --&gt;
              &lt;div class="form-group" ng-class="{ 'has-error': practichemForm.password.$invalid &amp;&amp; !practichemForm.password.$pristine }"&gt;
                  &lt;label&gt;Password&lt;/label&gt;
                  &lt;input type="password" name="password" class="form-control" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/" required&gt;
                  &lt;p ng-show="practichemForm.password.$error.minlength" class="help-block"&gt;Password needs to be at least 8 characters long.&lt;/p&gt;
                  &lt;p ng-show="practichemForm.password.$error.maxlength" class="help-block"&gt;Password is too long.&lt;/p&gt;
                  &lt;p ng-show="practichemForm.password.$error.pattern" class="help-block"&gt;Password needs at least one integer, one lowercase letter and one uppercase letter.&lt;/p&gt;
              &lt;/div&gt;
              &lt;!-- PASSWORD CONFIRMATION --&gt;
              &lt;div class="form-group" ng-class="{ 'has-error': practichemForm.passwordConfirm.$error.required &amp;&amp; !practichemForm.passwordConfirm.$pristine }"&gt;
                  &lt;label&gt;Password (confirmation)&lt;/label&gt;
                  &lt;input type="password" name="passwordConfirm" class="form-control" ng-model="formData.passwordConfirm" ui-validate="'$value == formData.password'" ui-validate-watch="'formData.password'" ng-minlength="8" ng-maxlength="20" required/&gt;
                  &lt;p ng-show="practichemForm.passwordConfirm.$error.ui-validate &amp;&amp; practichemForm.passwordConfirm.$dirty &amp;&amp; practichemForm.passwordConfirm.$error.required"&gt;Passwords don't match.&lt;/p&gt;
              &lt;/div&gt;
              &lt;br&gt;&lt;br&gt;
              &lt;button type="submit" class="btn btn-danger" ng-disabled="practichemForm.$invalid"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="index-right" ng-repeat="user in userArray"&gt;
          {{ user }}
      &lt;/div&gt;
      &lt;script type="text/javascript" src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bower_components/angular-ui-utils/validate.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>