I have a table that got generated with \*ngFor. Now Inside that table I have 2 columns and 5 rows. 1st column contains an select tag and 2nd column will show the selected value. 
Now the problem is when you will select any value in the select tag in any of the row, the selected value is showing up in all rows.

For Better understanding of the problem please refer <https://stackblitz.com/edit/angular-43oxrc>

app.component.ts

```
categoryCall(categoryName) {
    if (categoryName == 1) {
      this.categories = ["Value 1", "Value 2", "Value 3"];
    }
    else if (categoryName == 2) {
      this.categories = ["Value 4", "Value 6", "Value 5", "Value 7"];
    }
    else if (categoryName == 3) {
      this.categories = ["Value 7", "Value 8"];
    }
    return this.categories;
  }

```

app.componenent.html

```
<table>
          <tbody>
            <tr *ngFor="let item of [1,2,3,4,5]">
              <td>
                <select [(ngModel)]="selectedCategory">
                  <option *ngFor="let category of categoryCall(item)" [ngValue]="category">{{category}}</option>
                </select>
              </td>
              <td>
                Choosen Value: {{selectedCategory}}
              </td>
            </tr>
          </tbody>
        </table>

```

I need like; If you are choosing any value in 1st row then it's value should show up only in 1st row it self. It should not reflect in any other rows