Trying to fix

ionic/components/app/test/weather/index.js

@@ -9,8 +9,6 @@ import {Geo} from './geo';
 import {Weather} from './weather';
 import {Flickr} from './flickr';
 
-console.log('Imported', Geo, Weather, Flickr);
-
 @Component({
   selector: 'ion-app',
   appInjector: [Modal]
@@ -43,7 +41,7 @@ class WeatherApp {
   }
 
   showSettings() {
-    this.Modal.show(SettingsModal).then((settingsModal) => {
+    this.Modal.open(SettingsModal).then((settingsModal) => {
       this.settingsModal = settingsModal;
     });
   }
@@ -134,9 +132,39 @@ class WeatherApp {
 
 @IonicComponent(Modal)
 @IonicView({
-  template: '<ion-view id="settings-modal"><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-view>'
+  template: `<ion-view id="settings-modal">
+    <ion-toolbar>
+      <ion-title>Settings</ion-title>
+    </ion-toolbar>
+    <ion-content padding>
+      <form (^submit)="doSubmit($event)" [ng-form-model]="settingsForm">
+        <ion-list>
+          <ion-input ion-item>
+            <ion-label>Units</ion-label>
+            <!--
+            <ion-segment ng-control="units">
+              <ion-segment-button value="standard" button>
+                &deg;F
+              </ion-segment-button>
+              <ion-segment-button value="standard" button>
+                &deg;C
+              </ion-segment-button>
+            </ion-segment>
+            -->
+          </ion-input>
+        </ion-list>
+      </form>
+    </ion-content>
+  </ion-view>`,
+  directives: [formDirectives]
 })
-export class SettingsModal extends Modal {}
+export class SettingsModal extends Modal {
+  constructor(fb: FormBuilder) {
+    this.settingsForm = fb.group({
+      mapStyle: ['hybrid', Validators.required]
+    });
+  }
+}
 
 export function main(ionicBootstrap) {
   ionicBootstrap(WeatherApp);

ionic/components/app/test/weather/style.css

@@ -222,7 +222,11 @@ current-weather .current-temp {
  */
 
 #settings-modal {
+  background-color: rgba(0,0,0,0.8) !important;
+}
+#settings-modal ion-toolbar {
   background-color: rgba(0,0,0,0.8);
+  color: #fff;
 }
 
 #settings-modal .item {

ionic/components/segment/segment.js

@@ -12,17 +12,20 @@ import {IonicDirective, IonicComponent, IonicView} from '../../config/annotation
 
 @IonicDirective({
   selector: 'ion-segment',
+  //properties: ['value'],
   host: {
     '(change)': 'onChange($event.target.value)',
     '(input)': 'onChange($event.target.value)',
     '(blur)': 'onTouched()',
-    '[value]': 'value',
+    //'[value]': 'value',
+    /*
     '[class.ng-untouched]': 'cd.control?.untouched == true',
     '[class.ng-touched]': 'cd.control?.touched == true',
     '[class.ng-pristine]': 'cd.control?.pristine == true',
     '[class.ng-dirty]': 'cd.control?.dirty == true',
     '[class.ng-valid]': 'cd.control?.valid == true',
     '[class.ng-invalid]': 'cd.control?.valid == false'
+    */
   }
 })
 export class SegmentControlValueAccessor {
@@ -74,13 +77,15 @@ export class Segment {
       host: {
         '(click)': 'buttonClicked($event)',
         '(change)': 'onChange($event)',
-        '[value]': 'value',
+        //'[value]': 'value',
+        /*
         '[class.ng-untouched]': 'cd.control?.untouched == true',
         '[class.ng-touched]': 'cd.control?.touched == true',
         '[class.ng-pristine]': 'cd.control?.pristine == true',
         '[class.ng-dirty]': 'cd.control?.dirty == true',
         '[class.ng-valid]': 'cd.control?.valid == true',
         '[class.ng-invalid]': 'cd.control?.valid == false'
+        */
       }
     }
   }