Tab selection does not work as exepected

I am using ionic 3 angular and building a web application. One of the requirement i am having is a tabs component with first tab showing a list. clicking each of list item creates a new tab and shows some contents.

The way I implemented it is:

     <ion-tabs #myTabs tabsPlacement="top" tabsLayout="icon-end">
                    <ion-tab *ngFor="let tb of core.dynamicTabs" [root]="tb.pageName" tabTitle="{{tb.tabTitle}}" tabIcon="close" (ionSelect)="onTabActive($event)"></ion-tab>

I am keeping a shared array to store tab related data like

    export class CoreStructureProvider {
      constructor(public http: Http) {
        this.dynamicTabs = [ { "pageName": MyListPage, "tabTitle" :, "optyId": rw.OptyId }];

So from the first tab’s page the code to create new tabs is:

                 this.core.dynamicTabs.push( { "pageName": EditOptyPage, "tabTitle" :, "optyId": rw.OptyId });

Everything works great except the tab selection. Just to simplify the problem i hardcode value to 1. So ideally everytime createTab is called the 2nd tab should be selected.

But here is the behavior that i am seeing:
when you come first time: there is just one tab showing the list. you click one of the items on the list and a new tab gets created. however that does not become the active tab.

now click one more time on any other link in the list and this time and from now onwards the 2nd tab becomes active.

So I am not sure why first time this does not trigger?