Implement base code that demonstrates the problem

.gitignore

@@ -0,0 +1,10 @@
+# Specifies files to intentionally ignore when using Git
+# http://git-scm.com/docs/gitignore
+
+node_modules/
+www/build/
+platforms/
+plugins/
+*.swp
+.DS_Store
+Thumbs.db

app/app.ts

@@ -0,0 +1,20 @@
+import {App, Platform} from 'ionic-angular';
+import {StatusBar} from 'ionic-native';
+import {TabsPage} from './pages/tabs/tabs';
+
+
+@App({
+  template: '<ion-nav [root]="rootPage"></ion-nav>',
+  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
+})
+export class MyApp {
+  rootPage: any = TabsPage;
+
+  constructor(platform: Platform) {
+    platform.ready().then(() => {
+      // Okay, so the platform is ready and our plugins are available.
+      // Here you can do any higher level native things you might need.
+      StatusBar.styleDefault();
+    });
+  }
+}

app/pages/modal/modal.ts

@@ -0,0 +1,24 @@
+import {Page,NavController,ViewController} from 'ionic-angular';
+
+@Page({
+    template:`
+        <ion-content padding>
+            <button (click)="close()">Close</button>
+        </ion-content>
+    `
+})
+
+export class ModalPage {
+
+    constructor( private _nav:NavController,
+        private _view:ViewController
+    ){
+
+    }
+
+    close(){
+        this._view.dismiss();
+        //this._nav.popToRoot();
+    }
+
+}

app/pages/page1/page1.html

@@ -0,0 +1,23 @@
+<ion-navbar *navbar>
+  <ion-title>Tab 1</ion-title>
+</ion-navbar>
+
+<ion-content padding class="page1">
+
+  <button (click)="openModal()">Open Modal</button>
+
+  <ion-segment [(ngModel)]="hometabs">
+    <ion-segment-button value="seg1">Seg 1</ion-segment-button>
+    <ion-segment-button value="seg2">Seg 2</ion-segment-button>
+  </ion-segment>
+
+  <div>
+    <div [ngSwitch]="hometabs">
+
+      <div *ngSwitchWhen="'seg1'">Seg 1</div>
+      <div *ngSwitchWhen="'seg2'">Seg 2</div>
+
+    </div>
+  </div>
+
+</ion-content>

app/pages/page1/page1.scss

@@ -0,0 +1,3 @@
+.page1 {
+
+}

app/pages/page1/page1.ts

@@ -0,0 +1,20 @@
+import {Page,Modal,NavController} from 'ionic-angular';
+import {ModalPage} from '../modal/modal';
+
+@Page({
+  templateUrl: 'build/pages/page1/page1.html',
+})
+export class Page1 {
+
+  hometabs:string="seg1";
+
+  constructor(private _nav:NavController) {
+
+  }
+
+  openModal(){
+    let modal=Modal.create(ModalPage);
+    this._nav.present(modal);
+  }
+
+}

app/pages/page2/page2.html

@@ -0,0 +1,10 @@
+
+<ion-navbar *navbar>
+  <ion-title>
+    Tab 2
+  </ion-title>
+</ion-navbar>
+
+<ion-content class="page2">
+
+</ion-content>

app/pages/page2/page2.scss

@@ -0,0 +1,3 @@
+.page2 {
+
+}

app/pages/page2/page2.ts

@@ -0,0 +1,11 @@
+import {Page} from 'ionic-angular';
+
+
+@Page({
+  templateUrl: 'build/pages/page2/page2.html',
+})
+export class Page2 {
+  constructor() {
+
+  }
+}

app/pages/page3/page3.html

@@ -0,0 +1,10 @@
+
+<ion-navbar *navbar>
+  <ion-title>
+    Tab 3
+  </ion-title>
+</ion-navbar>
+
+<ion-content class="page3">
+
+</ion-content>

app/pages/page3/page3.scss

@@ -0,0 +1,3 @@
+.page3 {
+
+}

app/pages/page3/page3.ts

@@ -0,0 +1,11 @@
+import {Page} from 'ionic-angular';
+
+
+@Page({
+  templateUrl: 'build/pages/page3/page3.html'
+})
+export class Page3 {
+  constructor() {
+
+  }
+}

app/pages/tabs/tabs.html

@@ -0,0 +1,5 @@
+<ion-tabs>
+  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
+  <ion-tab (select)="openModal()" tabTitle="Tab 2" tabIcon="chatbubbles"></ion-tab>
+  <ion-tab [root]="tab3Root" tabTitle="Tab 3" tabIcon="cog"></ion-tab>
+</ion-tabs>

app/pages/tabs/tabs.ts

@@ -0,0 +1,25 @@
+import {Page,Modal,NavController} from 'ionic-angular';
+import {Page1} from '../page1/page1';
+import {Page2} from '../page2/page2';
+import {Page3} from '../page3/page3';
+import {ModalPage} from '../modal/modal';
+
+
+@Page({
+  templateUrl: 'build/pages/tabs/tabs.html'
+})
+export class TabsPage {
+  // this tells the tabs component which Pages
+  // should be each tab's root Page
+  tab1Root: any = Page1;
+  tab2Root: any = Page2;
+  tab3Root: any = Page3;
+
+  constructor(private _nav:NavController){}
+
+  openModal(){
+    let modal=Modal.create(ModalPage);
+    this._nav.present(modal);
+  }
+
+}

app/theme/app.core.scss

@@ -0,0 +1,12 @@
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Imports
+// --------------------------------------------------
+// These are the imports which make up the design of this app.
+// By default each design mode includes these shared imports.
+// App Shared Sass variables belong in app.variables.scss.
+
+@import "../pages/page1/page1";
+@import "../pages/page2/page2";
+@import "../pages/page3/page3";

app/theme/app.ios.scss

@@ -0,0 +1,32 @@
+
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// Shared Sass variables go in the app.variables.scss file
+@import 'app.variables';
+
+
+// App iOS Variables
+// --------------------------------------------------
+// iOS only Sass variables can go here
+
+
+// Ionic iOS Sass
+// --------------------------------------------------
+// Custom App variables must be declared before importing Ionic.
+// Ionic will use its default values when a custom variable isn't provided.
+@import 'ionic.ios';
+
+
+// App Shared Sass
+// --------------------------------------------------
+// All Sass files that make up this app goes into the app.core.scss file.
+// For simpler CSS overrides, custom app CSS must come after Ionic's CSS.
+@import 'app.core';
+
+
+// App iOS Only Sass
+// --------------------------------------------------
+// CSS that should only apply to the iOS app

app/theme/app.md.scss

@@ -0,0 +1,31 @@
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// Shared Sass variables go in the app.variables.scss file
+@import 'app.variables';
+
+
+// App Material Design Variables
+// --------------------------------------------------
+// Material Design only Sass variables can go here
+
+
+// Ionic Material Design Sass
+// --------------------------------------------------
+// Custom App variables must be declared before importing Ionic.
+// Ionic will use its default values when a custom variable isn't provided.
+@import 'ionic.md';
+
+
+// App Shared Sass
+// --------------------------------------------------
+// All Sass files that make up this app goes into the app.core.scss file.
+// For simpler CSS overrides, custom app CSS must come after Ionic's CSS.
+@import 'app.core';
+
+
+// App Material Design Only Sass
+// --------------------------------------------------
+// CSS that should only apply to the Material Design app

app/theme/app.variables.scss

@@ -0,0 +1,35 @@
+// http://ionicframework.com/docs/v2/theming/
+
+// Ionic Shared Functions
+// --------------------------------------------------
+// Makes Ionic Sass functions available to your App
+
+@import 'globals.core';
+
+// App Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass variables found in Ionic's source scss files. Setting
+// variables before Ionic's Sass will use these variables rather than
+// Ionic's default Sass variable values. App Shared Sass imports belong
+// in the app.core.scss file and not this file. Sass variables specific
+// to the mode belong in either the app.ios.scss or app.md.scss files.
+
+
+// App Shared Color Variables
+// --------------------------------------------------
+// It's highly recommended to change the default colors
+// to match your app's branding. Ionic uses a Sass map of
+// colors so you can add, rename and remove colors as needed.
+// The "primary" color is the only required color in the map.
+// Both iOS and MD colors can be further customized if colors
+// are different per mode.
+
+$colors: (
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+  favorite:   #69BB7B
+);

app/theme/app.wp.scss

@@ -0,0 +1,31 @@
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// Shared Sass variables go in the app.variables.scss file
+@import 'app.variables';
+
+
+// App Windows Variables
+// --------------------------------------------------
+// Windows only Sass variables can go here
+
+
+// Ionic Windows Sass
+// --------------------------------------------------
+// Custom App variables must be declared before importing Ionic.
+// Ionic will use its default values when a custom variable isn't provided.
+@import "ionic.wp";
+
+
+// App Shared Sass
+// --------------------------------------------------
+// All Sass files that make up this app goes into the app.core.scss file.
+// For simpler CSS overrides, custom app CSS must come after Ionic's CSS.
+@import 'app.core';
+
+
+// App Windows Only Sass
+// --------------------------------------------------
+// CSS that should only apply to the Windows app

config.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<widget id="com.ionicframework.tabmodal507027" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <name>tab-modal</name>
+  <description>An Ionic Framework and Cordova project.</description>
+  <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
+  <content src="index.html"/>
+  <access origin="*"/>
+  <allow-intent href="http://*/*"/>
+  <allow-intent href="https://*/*"/>
+  <allow-intent href="tel:*"/>
+  <allow-intent href="sms:*"/>
+  <allow-intent href="mailto:*"/>
+  <allow-intent href="geo:*"/>
+  <platform name="android">
+    <allow-intent href="market:*"/>
+  </platform>
+  <platform name="ios">
+    <allow-intent href="itms:*"/>
+    <allow-intent href="itms-apps:*"/>
+  </platform>
+  <preference name="webviewbounce" value="false"/>
+  <preference name="UIWebViewBounce" value="false"/>
+  <preference name="DisallowOverscroll" value="true"/>
+  <preference name="android-minSdkVersion" value="16"/>
+  <preference name="BackupWebStorage" value="none"/>
+  <feature name="StatusBar">
+    <param name="ios-package" onload="true" value="CDVStatusBar"/>
+  </feature>
+  <plugin name="cordova-plugin-device" spec="~1.1.2"/>
+  <plugin name="cordova-plugin-console" spec="~1.0.3"/>
+  <plugin name="cordova-plugin-whitelist" spec="~1.2.2"/>
+  <plugin name="cordova-plugin-splashscreen" spec="~3.2.2"/>
+  <plugin name="cordova-plugin-statusbar" spec="~2.1.3"/>
+  <plugin name="ionic-plugin-keyboard" spec="~2.1.0"/>
+</widget>