Selecting more than one item from list

Question

I have a compose a message page where the user can add a contact to send a message to. for now, I am able to send only one contact, what I am trying to do is selecting more than one contact to create a group message. I am new to angularjs/js, so can someone please give me an idea on how this can be possible? I am using onsen to create the texting app.. here is what I have for now..

   $scope.contactsBack = function(name) {

  $scope.navi.pushPage('message.html');
  $scope.contactName = name;


  }

in compose message page I have this

    <div ng-controller="ContactsController" >
            <div class="left">
                <input type="text" id = "myText"ng-model="contactName" class="text-input text-input--transparent" placeholder="Name" style="width: 100%">
            </div>
        </div>

            <ons-col>
            <div class="left" ng-controller="MasterController">
                <ons-button ng-click="navi.pushPage('contacts2.html')"><ons-icon icon="ion-plus-round"></ons-icon></ons-toolbar-button>
            </div>
        </ons-col>

in contacts2 page were contact is being selected

 <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-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" ng-click="contactsBack(person.username)" >
                {{person.username}}
              </ons-col>
            </ons-row>
          </ons-list-item>
      </ons-list>
    </div>

Answer 1

Why not just add a checkbox, on tap add the value to an array, and use a close button or such to fire contactsBack() passing the array?

The checkbox could be next to the image.

<ons-row>
   <ons-col width="40px">
     <input type="checkbox" ng-click="myArray.push(person.username)">
   </ons-col>
   <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>