Move from "ion-select" to "popover", try to pass variable back to parent

I hv created a ion-select and i want to change it to popover.

The popover was created but it failed to pass ngModel value back to the parent component, I end up messing it up…

So here is the code… I hope someone could tell me what’s the best way to make it happen.
I tried reading the document but the example was just too complicated and i m not too familiar with what’s going on in Angular2 yet.

for example i have 3 Chapters and each I hv a json file storing informations.
The ion-select will choose a book chapter and then load the corresponding JSON file to the content.
I however do not know how to achieve the same using popover… :persevere:

.ts file:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {CardService} from '../../providers/card-service/card-service';
import {LangService} from '../../providers/lang-service/lang-service';

@Component({
  templateUrl: 'build/pages/home/home.html',
    providers: [CardService, LangService],
directives: [LangService]
})


export class HomePage {
///  
public cards:any;
public chpselected : any;
public menuArray: any;
public viewmode : any;
public alertOptions: any; 
    constructor(
    private navController: NavController,
    public cardService: CardService,
    public langService: LangService
    ){
this.menuArray = [
        {
                id: 1,
                cchap: '01',
                ctitle: 'Chapter One'
        },{
                id: 2,
                cchap: '02',
                ctitle: 'Chapter Two'
        },{
                id: 3,
                cchap: '03',
                ctitle: 'Chapter Three'
        },
];
   this.alertOptions = {
       title: '',
       cssClass: 'chapterselector'
        };     
        this.chpselected = this.menuArray[0];
        this.loadCards();
    };
 
/* LOAD CARDS  load JSON*/
  loadCards(){
    this.cardService.load(this.chpselected.cchap)
    .then(data => {
      this.cards = data;
    });
  }
    
/* LOAD CARDS ENDED*/    
///
}

Mark-Up:

<ion-header>
    <ion-toolbar>
        <ion-segment [(ngModel)]="viewmode">
            <ion-segment-button value="read" style=" max-width: 70px;"> New </ion-segment-button>
            <ion-segment-button value="gallery" style=" max-width: 70px;"> Hot </ion-segment-button>
        </ion-segment>
        <ion-buttons end>
            <langselectholder></langselectholder>
        </ion-buttons>
    </ion-toolbar>
    <div class="bar bar-subheader" [style.background-color]="chpselected.color" style="color: white">
        <ion-select [(ngModel)]="chpselected.cchap" (ngModelChange)="loadCards('$event.target.value')"  [alertOptions]="alertOptions">
            <ion-option *ngFor="let chapter of menuArray" value="{{chapter.cchap}}" >
            <span style="color:white;">{{chapter.ctitle}}</span>
            </ion-option>
        </ion-select>
         <ion-buttons end>
      <button (click)="pop($event)" >
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
    </div>
</ion-header>
<ion-content padding class="home" #popover> 
    
    <h2>Welcome to Ionic!</h2>
    
    <span *ngFor="let card of cards">
        {{card.id}} {{card.aowline}}
    </span>
    
</ion-content>