Chained Observable after takeWhile completes is not being called?

I have the following methods which should be called like this:

1. registerDomain should be called and should return an operationId
2. After 10 seconds, getOperationDetail should be called passing in the operationId
3. getOperationDetail should be called every 10 seconds until successful is returned.
4. Once getOperationDetail finishes, createRecordSets should be called.
5. Finally, getChangeStatus should be called until it returns INSYNC
6. If any of the api calls throw an exception, how can I handle the error on the client side?

The following code below calls registerDomain and getOperationDetail, but after getOperationDetail completes, it does not move onto createRecordSets.

  registerDomain(domain) {
    return this._adminService.registerDomain(domain)
      .concatMap(operation => this.getOperationDetail(operation.OperationId))
      .concatMap(() => this._adminService.createRecordSets(domain));
  }

  getOperationDetail(operationId) {
    return Observable.interval(10000)
      .mergeMap(() => this._adminService.getOperationDetail(operationId))
      .takeWhile((info) => info.Status.Value !== 'SUCCESSFUL');
  }
  createRecordSets(caseWebsiteUrl) {
    return this._adminService.createRecordSets(caseWebsiteUrl.Url)
        .concatMap(registerId => this.getChangeStatus(registerId));
  }

  getChangeStatus(registerId) {
    return Observable.interval(5000)
      .mergeMap(() => this._adminService.getChange(registerId))
      .takeWhile((info) => info.ChangeInfo.Status.Value !== 'INSYNC');
  }

I updated getOperationDetail to use the first operator:

  getOperationDetail(operationId) {
    return Observable.interval(3000)
      .mergeMap(() => this._adminService.getOperationDetail(operationId))
      .first((info) =>  info.Status.Value === 'SUCCESSFUL')

  }

Now it does in fact call createRecordSets, however, after createRecordSets, it continues to call getOperationDetail about 13 times and eventually calls getChangeStatus. The way I was looking at it, I thought it would:

1. Call getOperationDetail until it receives a SUCCESS.
2. Call createRecordSets one time.
3. Call getChangeStatus until it receives an INSYNC
4. Done.

Why the additional calls?

I changed the registerDomain to look like this:

 registerDomain(domain) {
    return this._adminService.registerDomain(domain)
      .concatMap(operation => this.getOperationDetail(operation.OperationId))
        .concatMap((op) => this.createRecordSets(op));

Before I had the .concatMap((op) => this.createRecordSets(op)) chained right after this.getOperationDetail. Once I moved it outside that, it started working as expected. I am unsure why though. Can someone explain?