Displaying form data immediately on the side after submit - Angularjs

Problem

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).

The following is the markup for the right-side of the page: The userArray is defined on the scope and has the usernames pushed into it.

    <div class="index-right">
        <p ng-repeat="user in userArray">
            {{ user }}
        </p>
    </div>

This is my main module and controller:

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);
    };

});

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.

I am adding the whole index.html here:

<!DOCTYPE html>
<html>
<head>
    <title>Registration</title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body ng-app="practichemApp">
    <header class="index-header"><h1>Registration Page</h1></header>
    <hr>
    <div class="index-left" ng-controller="MainCtrl">
        <form id="index-form" name="practichemForm" ng-submit="submitForm(practichemForm.$valid)" novalidate>
            <!-- USERNAME -->
            <div class="form-group" ng-class="{ 'has-error': practichemForm.username.$invalid && !practichemForm.username.$pristine }">
                <label>Username</label>
                <input type="text" name="username" class="form-control" ng-model="formData.username" ng-minlength="3" ng-maxlength="20" required>
                <p ng-show="practichemForm.username.$invalid && !practichemForm.username.$pristine" class="help-block">Username is required</p>
                <p ng-show="practichemForm.username.$error.minlength" class="help-block">Username is too short.</p>
                <p ng-show="practichemForm.username.$error.maxlength" class="help-block">Username is too long.</p>
            </div>
            <!-- EMAIL -->
            <div class="form-group" ng-class="{ 'has-error': practichemForm.email.$invalid && !practichemForm.email.$pristine }">
                <label>Email</label>
                <input type="email" name="email" class="form-control" ng-model="formData.email" required>
                <p ng-show="practichemForm.email.$invalid && !practichemForm.email.$pristine" class="help-block">Please Enter a valid email.</p>
            </div>
            <!-- PASSWORD -->
            <div class="form-group" ng-class="{ 'has-error': practichemForm.password.$invalid && !practichemForm.password.$pristine }">
                <label>Password</label>
                <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>
                <p ng-show="practichemForm.password.$error.minlength" class="help-block">Password needs to be at least 8 characters long.</p>
                <p ng-show="practichemForm.password.$error.maxlength" class="help-block">Password is too long.</p>
                <p ng-show="practichemForm.password.$error.pattern" class="help-block">Password needs at least one integer, one lowercase letter and one uppercase letter.</p>
            </div>
            <!-- PASSWORD CONFIRMATION -->
            <div class="form-group" ng-class="{ 'has-error': practichemForm.passwordConfirm.$error.required && !practichemForm.passwordConfirm.$pristine }">
                <label>Password (confirmation)</label>
                <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/>
                <p ng-show="practichemForm.passwordConfirm.$error.ui-validate && practichemForm.passwordConfirm.$dirty && practichemForm.passwordConfirm.$error.required">Passwords don't match.</p>
            </div>
            <br><br>
            <button type="submit" class="btn btn-danger" ng-disabled="practichemForm.$invalid">Submit</button>
        </form>
    </div>
    <div class="index-right" ng-repeat="user in userArray">
        {{ user }}
    </div>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-ui-utils/validate.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>
Problem courtesy of: angular-guy

Solution

Your element that you want to use to show your data it outside of the scope of the place that has the data.

<div class="index-left" ng-controller="MainCtrl">
    ...
</div>
<div class="index-right" ng-repeat="user in userArray">
    {{ user }}
</div>

You can use a service to share the information, or put the userArray on a higher scope (like $rootScope, or move the ng-controller to a element that wraps both.

$rootScope being the easiest.. try this:

<div class="index-left" ng-controller="MainCtrl">
    ...
</div>
<div class="index-right" ng-repeat="user in userArray">
    {{ $root.user }}
</div>

var app = angular.module('myApp', ['ngRoute', 'ui.validate']);

app.controller('MainCtrl', function($scope, $rootScope){
    $rootScope.userArray = [];
    console.log($rootScope.userArray);
    $scope.submitForm = function(isValid){
        if(isValid){
            $rootScope.userArray.push($scope.formData.username);
        }
        console.log($rootScope.userArray);
    };

});
Solution courtesy of: TheSharpieOne

Discussion

You have your ng-repeat out of the controller scope

I created a plunker for you example (removed some fields for simplicity)

http://plnkr.co/edit/7skU1lBIU5Gy7bJ0Htgh?p=preview

Moved this inside so that it is under mainctrl's

   <div class="index-right" ng-repeat="user in userArray">
        {{ user }}
    </div>
Discussion courtesy of: bhantol

This recipe can be found in it's original form on Stack Over Flow.