diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
index de63585f7f7..13d3c224c75 100755
--- a/src/app/components/multiselect/multiselect.ts
+++ b/src/app/components/multiselect/multiselect.ts
@@ -178,7 +178,7 @@ export class MultiSelectItem {
                             <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder || defaultLabel || 'empty' }}</ng-container>
                         </ng-container>
                     </ng-container>
-                    <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: modelValue(), removeChip: removeOption.bind(this) }"></ng-container>
+                    <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"></ng-container>
                 </div>
                 <ng-container *ngIf="isVisibleClearIcon">
                     <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-multiselect-clear-icon'" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
@@ -972,6 +972,8 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
 
     focusedOptionIndex = signal<number>(-1);
 
+    selectedOptions: any;
+
     get containerClass() {
         return {
             'p-multiselect p-component p-inputwrapper': true,
@@ -1086,7 +1088,15 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         return ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue() && this.modelValue().length > this.maxSelectedLabels ? this.modelValue().slice(0, this.maxSelectedLabels) : this.modelValue();
     });
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {
+        effect(() => {
+            const modelValue = this.modelValue();
+            const visibleOptions = this.visibleOptions();
+            if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions) && modelValue) {
+                this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
+            }
+        })
+    }
 
     ngOnInit() {
         this.id = this.id || UniqueComponentId();
@@ -1250,6 +1260,11 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         });
     }
 
+
+    findSelectedOptionIndex() {
+        return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
+    }
+
     onOptionSelectRange(event, start = -1, end = -1) {
         start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));
         end === -1 && (end = this.findNearestSelectedOptionIndex(start));
@@ -1930,6 +1945,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         this.value = null;
         this.checkSelectionLimit();
         this.updateModel(null, event);
+        this.selectedOptions = null;
         this.onClear.emit();
 
         event.stopPropagation();
diff --git a/src/app/showcase/doc/multiselect/templatedoc.ts b/src/app/showcase/doc/multiselect/templatedoc.ts
index 5f8b6b9eadf..253a85b4a5b 100644
--- a/src/app/showcase/doc/multiselect/templatedoc.ts
+++ b/src/app/showcase/doc/multiselect/templatedoc.ts
@@ -15,11 +15,11 @@ interface Country {
         <div class="card flex justify-content-center">
             <p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" placeholder="Select Countries" optionLabel="name">
                 <ng-template let-value pTemplate="selectedItems">
-                    <div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of selectedCountries">
+                    <div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of value">
                         <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" style="width: 18px" />
                         <div>{{ option.name }},</div>
                     </div>
-                    <div *ngIf="!selectedCountries || selectedCountries.length === 0">Select Countries</div>
+                    <div *ngIf="!value || value.length === 0">Select Countries</div>
                 </ng-template>
                 <ng-template let-country pTemplate="item">
                     <div class="flex align-items-center gap-2">
@@ -60,11 +60,11 @@ export class TemplateDoc implements OnInit {
         basic: `
 <p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" placeholder="Select Countries" optionLabel="name">
     <ng-template let-value pTemplate="selectedItems">
-        <div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of selectedCountries">
+        <div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of value">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" style="width: 18px" />
-            <div>{{ option.name }}, </div>
+            <div>{{ option.name }},</div>
         </div>
-        <div *ngIf="!selectedCountries || selectedCountries.length === 0">Select Countries</div>
+        <div *ngIf="!value || value.length === 0">Select Countries</div>
     </ng-template>
     <ng-template let-country pTemplate="item">
         <div class="flex align-items-center gap-2">
@@ -78,11 +78,11 @@ export class TemplateDoc implements OnInit {
 <div class="card flex justify-content-center">
     <p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" placeholder="Select a Country" optionLabel="name">
         <ng-template let-value pTemplate="selectedItems">
-            <div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of selectedCountries">
+            <div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of value">
                 <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" style="width: 18px" />
-                <div>{{ option.name }}, </div>
+                <div>{{ option.name }},</div>
             </div>
-            <div *ngIf="!selectedCountries || selectedCountries.length === 0">Select Countries</div>
+            <div *ngIf="!value || value.length === 0">Select Countries</div>
         </ng-template>
         <ng-template let-country pTemplate="item">
             <div class="flex align-items-center gap-2">