the select option value changes for all other select options

Question

  <nb-select [(ngModel)]="selectedOption" 
  (click)="getProdDetails(p.ProductName,p.Brand)" ngDefaultControl>
  <nb-option [value]="p.Size" class="text-nowrap" [hidden]="hide">
     {{ p.Size }} : + {{ p.SaleRate | currency: "INR": 'symbol' : 
 '1.0-0'}}
  </nb-option>
  <nb-option class="text-nowrap" [value]="i.Size" *ngFor="let i of 
     prodDetails"[hidden]="!hide">
     {{ i.Size }} : + {{ i.SaleRate |currency: "INR": 'symbol' : 
 '1.0-0'}}
  </nb-option>
  </nb-select>



 .ts code:

  selectedOption: any;
  getData(){
  this.ProdData = [];
 this.commonservice.get('api').subscribe((data) => {
    const temp = data.data["data"];
   // by using for loop i am iterating through each value of array 
   and pushing it in ProdData
    this.ProdData.push(temp);
   )}
   }
 Similarly in <nb-select> the p is getting values from ProdData 
 Array.
 getProdDetails(name,brand){
 this.prodDetails = [];
 this.commonService
  .get(url)
  .subscribe((res) => {
    const temp = res.data["data"];
     )} 
 }

Refer to the image below. In the first nb-option, I get the value from the different arrays. In second nb-option I get the value from array defined in getProdDetails() method. When I click on the option value of 2nd nb-option it replaces the value of all select options with the selected one.

I hope it will help! Also, if I don't use [(ngModel)] it is working fine. but I need to use it to bind the value and use it in my .ts file. And I want to show the selected item in the select box every time we select an option.