diff --git a/app/controllers/search_controller.rb b/app/controllers/search_controller.rb
index be4e04f7ee4..e5029e2079b 100644
--- a/app/controllers/search_controller.rb
+++ b/app/controllers/search_controller.rb
@@ -161,7 +161,8 @@ class SearchController < ApplicationController
         search_types
       end
 
-    scope.index_with { |s| scope_class(s) }
+    scope
+      .index_with { |s| scope_class(s) }
   end
 
   def scope_class(scope)
diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb
index 1b479e5ebab..427ddd78bd4 100644
--- a/app/views/search/index.html.erb
+++ b/app/views/search/index.html.erb
@@ -27,6 +27,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
+<% html_title(t(:label_search)) -%>
 <% content_for :header_tags do %>
   <%= call_hook :search_index_head %>
 <% end %>
@@ -72,9 +73,13 @@ See COPYRIGHT and LICENSE files for more details.
 %>
 
 <% if params[:filter] == "work_packages" %>
-  <opce-global-search-work-packages></opce-global-search-work-packages>
-<% else %>
+  <%= angular_component_tag "opce-global-search-work-packages",
+                            inputs: {
+                              searchTerm: @question,
+                              scope: search_params[:scope],
+                            } %>
 
+<% else %>
   <h3><%= t(:label_result_plural) %> (<%= @results_count&.values&.sum || 0 %>)</h3>
 
   <% if @results.present? %>
@@ -103,9 +108,6 @@ See COPYRIGHT and LICENSE files for more details.
         </dd>
       <% end %>
     </dl>
-
   <% end %>
+  <%= render partial: "pagination", locals: { pagination_previous_date: @pagination_previous_date, pagination_next_date: @pagination_next_date } if params[:work_packages].blank? %>
 <% end %>
-
-<%= render partial: "pagination", locals: { pagination_previous_date: @pagination_previous_date, pagination_next_date: @pagination_next_date } if params[:work_packages].blank? %>
-<% html_title(t(:label_search)) -%>
diff --git a/frontend/src/app/core/global_search/global-search-work-packages.component.ts b/frontend/src/app/core/global_search/global-search-work-packages.component.ts
index bb1c5b31bda..6a6d03b0c9b 100644
--- a/frontend/src/app/core/global_search/global-search-work-packages.component.ts
+++ b/frontend/src/app/core/global_search/global-search-work-packages.component.ts
@@ -31,7 +31,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
+  ElementRef, Input,
   OnDestroy,
   OnInit,
   Renderer2,
@@ -55,24 +55,26 @@ import {
 import {
   WorkPackageIsolatedQuerySpaceDirective,
 } from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive';
+import { QueryRequestParams } from 'core-app/features/work-packages/components/wp-query/url-params-helper';
+import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 
 @Component({
   selector: 'opce-global-search-work-packages',
   changeDetection: ChangeDetectionStrategy.OnPush,
   hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
   template: `
-    <wp-embedded-table *ngIf="!resultsHidden"
-                       [queryProps]="queryProps"
+    <wp-embedded-table [queryProps]="queryProps"
                        [configuration]="tableConfiguration">
     </wp-embedded-table>
   `,
   standalone: false,
 })
-export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin implements OnInit, OnDestroy, AfterViewInit {
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  public queryProps:{ [key:string]:any };
+export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin implements OnInit, OnDestroy {
+  @Input() public searchTerm:string;
 
-  public resultsHidden = false;
+  @Input() public scope:'all'|'current_project'|'';
+
+  public queryProps:Partial<QueryRequestParams>;
 
   public tableConfiguration:WorkPackageTableConfigurationObject = {
     actionsColumnEnabled: false,
@@ -89,37 +91,12 @@ export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin imple
     readonly renderer:Renderer2,
     readonly I18n:I18nService,
     readonly halResourceService:HalResourceService,
-    readonly globalSearchService:GlobalSearchService,
     readonly wpTableFilters:WorkPackageViewFiltersService,
     readonly querySpace:IsolatedQuerySpace,
-    readonly wpFilters:WorkPackageFiltersService,
     readonly cdRef:ChangeDetectorRef,
   ) {
     super();
-  }
-
-  ngAfterViewInit() {
-    combineLatest([
-      this.globalSearchService.searchTerm$,
-      this.globalSearchService.projectScope$,
-    ])
-      .pipe(
-        skip(1),
-        distinctUntilChanged(),
-        debounceTime(10),
-        this.untilDestroyed(),
-      )
-      .subscribe(() => {
-        this.wpFilters.visible = false;
-        this.setQueryProps();
-      });
-
-    this.globalSearchService
-      .resultsHidden$
-      .pipe(
-        this.untilDestroyed(),
-      )
-      .subscribe((resultsHidden:boolean) => (this.resultsHidden = resultsHidden));
+    populateInputsFromDataset(this);
   }
 
   ngOnInit():void {
@@ -131,23 +108,23 @@ export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin imple
     const filters:any[] = [];
     let columns = ['id', 'project', 'subject', 'type', 'status', 'updatedAt'];
 
-    if (this.globalSearchService.searchTermIsId) {
+    if (this.searchTermIsId) {
       filters.push({
         id: {
           operator: '=',
-          values: [this.globalSearchService.searchTermWithoutHash],
+          values: [this.searchTermWithoutHash],
         },
       });
-    } else if (this.globalSearchService.searchTerm.length > 0) {
+    } else if (this.searchTerm.length > 0) {
       filters.push({
         search: {
           operator: '**',
-          values: [this.globalSearchService.searchTerm],
+          values: [this.searchTerm],
         },
       });
     }
 
-    if (this.globalSearchService.projectScope === 'current_project') {
+    if (this.scope === 'current_project') {
       filters.push({
         subprojectId: {
           operator: '!*',
@@ -157,7 +134,7 @@ export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin imple
       columns = ['id', 'subject', 'type', 'status', 'updatedAt'];
     }
 
-    if (this.globalSearchService.projectScope === '') {
+    if (this.scope === '') {
       filters.push({
         subprojectId: {
           operator: '*',
@@ -173,4 +150,15 @@ export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin imple
       showHierarchies: false,
     };
   }
+
+  public get searchTermIsId():boolean {
+    return this.searchTermWithoutHash !== this.searchTerm;
+  }
+
+  public get searchTermWithoutHash():string {
+    if (/^#(\d+)/.exec(this.searchTerm)) {
+      return this.searchTerm.substr(1);
+    }
+    return this.searchTerm;
+  }
 }
diff --git a/frontend/src/app/core/global_search/services/global-search.service.ts b/frontend/src/app/core/global_search/services/global-search.service.ts
index ea13067f3fe..5a838f0767c 100644
--- a/frontend/src/app/core/global_search/services/global-search.service.ts
+++ b/frontend/src/app/core/global_search/services/global-search.service.ts
@@ -120,17 +120,6 @@ export class GlobalSearchService {
     return this._searchTerm.value;
   }
 
-  public get searchTermIsId():boolean {
-    return this.searchTermWithoutHash !== this.searchTerm;
-  }
-
-  public get searchTermWithoutHash():string {
-    if (/^#(\d+)/.exec(this.searchTerm)) {
-      return this.searchTerm.substr(1);
-    }
-    return this.searchTerm;
-  }
-
   public get tabs():string {
     return this._tabs.value;
   }