title: ng2-select not working when I get data from api and cast it in initData
body: <h2>Detail</h2>
  <p>I use ng2-select in the form. I retrieve data from api and set into the array but it not working correctly. bellow is my code. when I hard code it is working fine. I have no clue why this is doing this, may be because It initialize the array with empty data after that the response get the data but not set it to the array.</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  import {Observable} from 'rxjs/Observable';
  import { AuthService } from '../../services/auth/auth.service';
  import {SELECT_DIRECTIVES} from 'ng2-select';
  
  @Component({
  selector: 'users-edit',
  templateUrl: '../../app/components/user/user-edit.html',
  directives: [SELECT_DIRECTIVES]
  })
  export class UserEditComponent implements OnInit{
  private isAdmin: Boolean = false;
  private _data: Observable;
  private fname: string;
  private id: number;
  private lname: string;
  private email: string;
  private _roles: Observable;
  public roles: any = [];
  public groups: any = ['Group 1', 'Group 2', 'Group 3', 'Group 4', 'Group 5'];
  private initRoleData: Array[]=[]; 
  private _disabledV: string = '0';
  private disabled: boolean = false;
  
  
  constructor(private router: Router,
      private userService: UserService,
      private route: ActivatedRoute,
      private authService: AuthService) {
  
      this.route.params.subscribe(params =&gt; {
          this.id = +params['id'];
      });
  }
  
  ngOnInit() {
      this.userService.getUser(this.id)
          .subscribe(data =&gt; {
              this.fname = data.FirstName;
              this.lname = data.LastName;
              this.email = data.Email;
          });
      this.userService.getUserRolesById(this.id)
          .subscribe(data =&gt; {
              data.forEach(role =&gt; {
                  this.initRoleData.push(role.Name);             
              });
          });
      console.log(this.initRoleData);
      this.userService.getAllRoles()
          .subscribe(data =&gt; {
              data.forEach(role =&gt; {
                  this.roles.push(role.Name);
              });
          });
      console.log(this.roles);
  }
  }
  </code></pre>
  <h2>html</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row margin-bottom-40" style="margin-top:50px;"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;!-- Reg-Form --&gt;
          &lt;form id="sky-form4" class="sky-form" (ngSubmit)="Submit(userEdit)" #userEdit="ngForm"&gt;
              &lt;header&gt;Edit User Account&lt;/header&gt;
  
              &lt;fieldset&gt;
                  &lt;section&gt;
                      &lt;label class="input"&gt;
                          &lt;i class="icon-append fa fa-user"&gt;&lt;/i&gt;
                          &lt;input type="text" name="username" placeholder="First Name" required [value]="fname"&gt;
                          &lt;b class="tooltip tooltip-bottom-right"&gt;Enter First Name&lt;/b&gt;
                      &lt;/label&gt;
                  &lt;/section&gt;
  
                  &lt;section&gt;
                      &lt;label class="input"&gt;
                          &lt;i class="icon-append fa fa-user"&gt;&lt;/i&gt;
                          &lt;input type="text" name="username" placeholder="Last Name" [value]="lname"&gt;
                          &lt;b class="tooltip tooltip-bottom-right"&gt;Enter Last Name&lt;/b&gt;
                      &lt;/label&gt;
                  &lt;/section&gt;
  
                  &lt;section&gt;
                      &lt;label class="input"&gt;
                          &lt;i class="icon-append fa fa-envelope"&gt;&lt;/i&gt;
                          &lt;input type="email" name="email" placeholder="Email address" [value]="email"&gt;
                          &lt;b class="tooltip tooltip-bottom-right"&gt;Enter Email Address&lt;/b&gt;
                      &lt;/label&gt;
                  &lt;/section&gt;
  
                  &lt;section&gt;
                      &lt;label&gt;
                          Roles
                      &lt;/label&gt;
                      &lt;div&gt;
                          &lt;ng-select 
                                     [multiple]="true"
                                     [items]="roles"
                                     [disabled]="disabled"
                                     (data)="refreshValue($event)"
                                     (selected)="selected($event)"
                                     (removed)="removed($event)"
                                     placeholder="No roles assign"&gt;
                          &lt;/ng-select&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
                  
                  &lt;!--&lt;section&gt;
                      &lt;label&gt;
                          Groups
                      &lt;/label&gt;
                      &lt;div&gt;
                          &lt;ng-select 
                                     [multiple]="true"
                                     [items]="groups"
                                     [disabled]="disabled"
                                     (data)="refreshValue($event)"
                                     (selected)="selected($event)"
                                     (removed)="removed($event)"
                                     placeholder="No groups assign"&gt;
                          &lt;/ng-select&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;--&gt;
              &lt;/fieldset&gt;
              &lt;footer&gt;
                  &lt;button type="reset" class="btn-u"&gt;Cancel&lt;/button&gt;
                  &lt;button type="submit" class="btn-u" [disabled]="!userEdit.form.valid"&gt;Save&lt;/button&gt;
              &lt;/footer&gt;
          &lt;/form&gt;
          &lt;!-- End Reg-Form --&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!--/end row--&gt;
  &lt;!-- JS Global Compulsory --&gt;</code></pre>
  </div>
  </div>
  </p>