How to bind checkboxes from a modal to fill a form field in angular

I have a data binding question using angular and the ionic framework. So I am trying to let a user select contacts from a modal, which should bind/fill a form field on the page. This seems like a basic angular question and since I'm new to Angular binding, not sure how it works. How do scopes work in this case with a modal? If I pass in the controller $scope to the modal when I create it does it have access to the same scope and model objects with the angular directives like ng-model within the html of the modal itself?

I tried initially just setting the ng-model on the checkbox to the same ng-model of the form field thinking it might just sync bind any changes back to the form but that didn't work.

<ion-view title="Create">
  <ion-content class="has-header">
    <form name="inviteForm" ng-submit="createInvite(invite)">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Who</span>
          <input type="text" placeholder="Who" ng-model="invite.who" readonly ng-click="openContactPicker()">
        </label>
      </div>
      <div class="padding">
        <button type="submit" class="button button-block button-positive">Create Invite</button>
      </div>
    </form>
  </ion-content>
</ion-view>


<script id="pick-contacts.html" type="text/ng-template">
  <div class="modal">
    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">Pick Contacts</h1>
      <button class="button button-clear button-positive" ng-click="closeContactPicker()">Done</button>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content>
        <ul class="list">

          <li ng-repeat="contact in contacts" class="item item-checkbox">
             <label class="checkbox">
               <input type="checkbox" value='{{contact}}' ng-model="invite.who">
             </label>
            {{contact.displayName}}
          </li>
        </ul>
    </ion-content>
  </div>
</script>

controller code

  // Create and load the Modal
  $ionicModal.fromTemplateUrl('pick-contacts.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.pickerModal = modal;
  });

  $scope.openContactPicker = function() {

    // $scope.contacts = {};
    $scope.pickerModal.show();

    //this below throws invite undefined error
    console.log(invite);
    if ($scope.contacts.length == 0 && navigator && navigator.contacts)
    {
      var options = new ContactFindOptions();
      options.multiple = true;
      var fields = ["displayName", "emails", "phoneNumbers"]; //name or displayName
      navigator.contacts.find(fields, function(contacts){
        $scope.contacts = contacts;
      }, function(){
        console.log('error');
      }, options);
    }


  };



// Called when the form is submitted
  $scope.createInvite = function(invite) {
    $scope.invites.unshift({
      who: invite.who
    });

    $scope.inviteModal.hide();
    $scope.invite = {};
    $ionicNavBarDelegate.back();

  };

you can add an index on the checkbox to differentiate the checkboxes

<input type="checkbox" value='{{contact}}' ng-model="invite.who[$index]">

then the $index value can be used to map back to the contact in the contacts array.

I don't think there is a problem with your binding since the code is all in the controller.

But, you have your checkbox in an ng-repeat. The way you bind it means that all your checkboxes now receive the same ng-model. There is now way to determine which contact is invited and which not.

Each checkbox should have it's own modal or you can add a click event and maintain a list of all the clicked contacts.