How to change textarea value after pushing another page?

I'm all new to angularjs/onsen in general. So i'm trying to actually select a contact form contact list and show the name in the textarea for the create a message page. I have this, but it is not working.

contacts.html

<div ng-controller="ContactsController" >
      <ons-list class="person-list" >
        <ons-list-header class="person-list-header" ng-init="people = contacts">{{char}}</ons-list-header>
          <ons-list-item class="person" modifier="tappable" ng-click="contactsBack("{{person.username}}")" ng-repeat="person in contacts | filter:searchInput">
            <ons-row>
              <ons-col width="40px">
                <img src="images/profile-image-0{{i}}.png" class="person-image">
              </ons-col>

              <ons-col class="person-name" >
                {{person.username}}
              </ons-col>
            </ons-row>
          </ons-list-item>
      </ons-list>
    </div>

message page

        <ons-row align="center">
        <ons-col width="290px">
            <div class="left">
                <input type="text" id ="contactName" class="text-input text-input--transparent" placeholder="Name" style="width: 100%">
            </div>
        </ons-col>

    <ons-col>

app.js

    $scope.contactsBack = function(name) {
  $scope.document.getElementById("contactName").value = name;

  $scope.navi.pushPage('message.html');
  }

I have included the function under 'ContactsController'

Solution

In your mesaage page define field like this one.

Define your contactName using ng-model.You don't need ID attribute or javascript method for this

And JS:

$scope.contactsBack = function(name) {
    $scope.contactName = name;

    $scope.navi.pushPage('message.html');
}

Angular uses two-way data binding using which your field in message page is get populated with contact list.

EDIT 1 : remove double quote ng-click="contactsBack({{person.username}})"