title: Unable to add defaults items to angular dropdown
body: <p>i'm trying to display some default selected data to my angular dropdown menu but for some reason if i <code>push()</code> the items from inside the <code>subscribe()</code> method the items does not being selected and if i try adding the items outside of this specific subscribe method it adds the items to the dropdown without any problems.</p>
  <p><strong>NOTE:</strong> If i log my array, it gives me all the items, including the items that i added from inside the subscribe()</p>
  <p><strong>Part of my component:</strong></p>
  <pre><code>    public students = []
      public loadedSelectedStudents = []
      public selectedStudents = []
  
      // Get all selected students
      this.studentService.getStaffStudents(+loadedUserId).subscribe(async selectedStudents =&gt; {
  
          for (var i = 0; i &lt; selectedStudents.length; i++) {
  
              var selectedStudentId: number = selectedStudents[i].studentId
              var studentModel: StaffStudentModel = new StaffStudentModel()
              studentModel.userId = +loadedUserId
              studentModel.studentId = selectedStudentId
              
              var resStudent: StudentModel = await this.studentService.getStudent(selectedStudentId).toPromise()
              
              // THIS IS NOT WORKING
              this.loadedSelectedStudents.push({ student_id: studentModel.studentId, student_name: resStudent.name })
              this.selectedStudents.push({ student_id: studentModel.studentId, student_name: resStudent.name})
              this.changeDetectorRef.detectChanges();
  
          }
  
      })
  
      // THIS IS WORKING
      this.selectedStudents.push({student_id: 5, student_name: &quot;Jonh&quot;})
  </code></pre>
  <p><strong>Part of my service:</strong></p>
  <pre><code>getStaffStudents(userId: number) : any {
      return this.http.get&lt;StudentModel[]&gt;(this.baseUrl + 'Api/GetStaffStudents/' + userId).pipe(map(res =&gt; res))
  }
  </code></pre>
  <p><strong>My dropdown settings and FormGroup:</strong></p>
  <pre><code>this.studentsDropDownSettings = {
      idField: 'student_id',
      textField: 'student_name',
      allowSearchFilter: true,
      noDataAvailablePlaceholderText: &quot;No Available Students&quot;
  }
  
  this.studentsDropDownForm = this.fb.group({
      studentsItems: [this.selectedStudents]
  });
  </code></pre>
  <p><strong>And my HTML element:</strong></p>
  <pre><code>&lt;div *ngIf=&quot;showStudensMenu&quot; class=&quot;form-group&quot;&gt;
      &lt;form [formGroup]=&quot;studentsDropDownForm&quot;&gt;
          &lt;label for=&quot;exampleFormControlSelect1&quot;&gt;Students *&lt;/label&gt;
          &lt;ng-multiselect-dropdown
          [settings]=&quot;studentsDropDownSettings&quot; 
          [data]=&quot;students&quot;
          (onSelect)=&quot;onStudentSelected($event)&quot;
          (onSelectAll)=&quot;onAllStudentsSelected()&quot;
          (onDeSelect)=&quot;onStudentDeSelected($event)&quot;
          (onDeSelectAll)=&quot;onAllStudentsDeSelected()&quot;
          formControlName=&quot;studentsItems&quot;&gt;
          &lt;/ng-multiselect-dropdown&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>