Ionic2 checkbox issue in segments

I have a screen like this.

Here I am selecting checkboxes from the 1st segment(Man Segment) & going to the second segment(Woman segment) to select other checkboxes from woman segment. But when I back to the 1st segment all my previous checkboxes are unchecked although I can see there are value in the selected form control. I have taken a formarray & pushing a new formcontrol with value each time I check & removing when unchecked.

I am adding the code for better understanding.

constructor(public fb : FormBuilder){
   this.checkboxForm = this.fb.group({
        categories : this.fb.array([],CustomValidators.multipleCheckboxRequireAtleastOne)
    });
}


updateCheckedOptions(category, isChecked) {
   const categories = <FormArray>this.checkboxForm.controls['categories'];
   if(isChecked) {
     categories.push(new FormControl(category));
     console.log(categories.controls);
  } 
  else {
     let index = categories.controls.findIndex(x => x.value.id == category.id);
     categories.removeAt(index);
   }

}

And in the view

 <form [formGroup]="checkboxForm" (ngSubmit)="onSubmit(checkboxForm.value)">
     <ng-template *ngFor="let category of categories; let i=index">
        <ion-checkbox (ionChange)="updateCheckedOptions(category,$event.checked)">
        </ion-checkbox>
     </ng-template>
     <button type="submit" ion-button [disabled]="!checkboxForm.valid">go next</button>
 </form>

Please help with your suggestion.