diff --git a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts b/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts
index 6e3483f1eb6..635e02641f0 100644
--- a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts
+++ b/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts
@@ -8,7 +8,6 @@ import { filter, map, startWith } from 'rxjs/operators';
 import { ConfigService } from '../../../../assets/wise5/services/configService';
 import { TeacherDataService } from '../../../../assets/wise5/services/teacherDataService';
 import { copy } from '../../../../assets/wise5/common/object/object';
-import { EventEmitter } from 'stream';
 
 @Component({
   selector: 'workgroup-select-autocomplete',
@@ -17,20 +16,20 @@ import { EventEmitter } from 'stream';
   encapsulation: ViewEncapsulation.None
 })
 export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectComponent {
-  myControl = new FormControl();
   filteredWorkgroups: Observable<any>;
+  myControl = new FormControl();
 
   constructor(
-    protected ConfigService: ConfigService,
-    protected TeacherDataService: TeacherDataService
+    protected configService: ConfigService,
+    protected teacherDataService: TeacherDataService
   ) {
-    super(ConfigService, TeacherDataService);
+    super(configService, teacherDataService);
   }
 
   ngOnInit() {
     super.ngOnInit();
     this.updateFilteredWorkgroups();
-    const currentWorkgroup = this.TeacherDataService.getCurrentWorkgroup();
+    const currentWorkgroup = this.teacherDataService.getCurrentWorkgroup();
     if (currentWorkgroup) {
       this.myControl.setValue(currentWorkgroup.displayNames);
     }
@@ -67,6 +66,10 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone
     this.updateFilteredWorkgroups();
   }
 
+  protected setWorkgroup(workgroup: any): void {
+    this.updateWorkgroupDisplay(workgroup);
+  }
+
   getStudentsFromWorkgroups() {
     const students = [];
     for (const workgroup of this.workgroups) {
@@ -93,6 +96,10 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone
 
   itemSelected(workgroup: any) {
     this.setCurrentWorkgroup(workgroup);
+    this.updateWorkgroupDisplay(workgroup);
+  }
+
+  private updateWorkgroupDisplay(workgroup: any): void {
     if (workgroup) {
       this.myControl.setValue(workgroup.displayNames);
     } else {
diff --git a/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts b/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts
index c19990891c5..e14ec39807f 100644
--- a/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts
+++ b/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts
@@ -7,32 +7,32 @@ import { TeacherDataService } from '../../../assets/wise5/services/teacherDataSe
 
 @Directive({ selector: 'workgroup-select' })
 export class WorkgroupSelectComponent {
-  @Input()
-  customClass: string;
+  @Input() customClass: string;
   canViewStudentNames: boolean;
   periodId: number;
   selectedItem: any;
-  workgroups: any;
   subscriptions: Subscription = new Subscription();
+  workgroups: any;
 
   constructor(
-    protected ConfigService: ConfigService,
-    protected TeacherDataService: TeacherDataService
+    protected configService: ConfigService,
+    protected teacherDataService: TeacherDataService
   ) {}
 
   ngOnInit() {
-    this.canViewStudentNames = this.ConfigService.getPermissions().canViewStudentNames;
-    this.periodId = this.TeacherDataService.getCurrentPeriod().periodId;
+    this.canViewStudentNames = this.configService.getPermissions().canViewStudentNames;
+    this.periodId = this.teacherDataService.getCurrentPeriod().periodId;
     this.setWorkgroups();
     this.subscriptions.add(
-      this.TeacherDataService.currentWorkgroupChanged$.subscribe(({ currentWorkgroup }) => {
+      this.teacherDataService.currentWorkgroupChanged$.subscribe(({ currentWorkgroup }) => {
         if (currentWorkgroup != null) {
           this.setWorkgroups();
+          this.setWorkgroup(currentWorkgroup);
         }
       })
     );
     this.subscriptions.add(
-      this.TeacherDataService.currentPeriodChanged$.subscribe(({ currentPeriod }) => {
+      this.teacherDataService.currentPeriodChanged$.subscribe(({ currentPeriod }) => {
         this.periodId = currentPeriod.periodId;
         this.setWorkgroups();
         this.currentPeriodChanged();
@@ -46,6 +46,8 @@ export class WorkgroupSelectComponent {
 
   setWorkgroups() {}
 
+  protected setWorkgroup(workgroup: any): void {}
+
   currentPeriodChanged() {}
 
   sortByField(arr: any[], field: string): any[] {
@@ -61,7 +63,7 @@ export class WorkgroupSelectComponent {
   }
 
   filterWorkgroupsBySelectedPeriod() {
-    this.workgroups = this.ConfigService.getClassmateUserInfos().filter((workgroup) => {
+    this.workgroups = this.configService.getClassmateUserInfos().filter((workgroup) => {
       return (
         (this.periodId === -1 || workgroup.periodId === this.periodId) &&
         workgroup.workgroupId != null
@@ -70,6 +72,6 @@ export class WorkgroupSelectComponent {
   }
 
   setCurrentWorkgroup(workgroup) {
-    this.TeacherDataService.setCurrentWorkgroup(workgroup);
+    this.teacherDataService.setCurrentWorkgroup(workgroup);
   }
 }