diff --git a/ionic/components/app/test/weather/current-weather.html b/ionic/components/app/test/weather/current-weather.html
index 0360b4072a..4d1c443bce 100644
--- a/ionic/components/app/test/weather/current-weather.html
+++ b/ionic/components/app/test/weather/current-weather.html
@@ -1,5 +1,5 @@
 <div id="current-weather" *ng-if="current">
-  <h5><weather-icon icon="current.icon" id="current-icon"></weather-icon> {{current.currently.summary}}</h5>
+  <h5><weather-icon [icon]="current.icon" id="current-icon"></weather-icon> {{current.currently.summary}}</h5>
   <h5>
     <span id="temp-hi"><i class="icon ion-arrow-up-c"></i> <span>{{highTemp}}</span>&deg;</span>
     <span id="temp-lo"><i class="icon ion-arrow-down-c"></i> <span>{{lowTemp}}</span>&deg;</span>
diff --git a/ionic/components/app/test/weather/index.js b/ionic/components/app/test/weather/index.js
index b3e80d0c68..04abb6ee94 100644
--- a/ionic/components/app/test/weather/index.js
+++ b/ionic/components/app/test/weather/index.js
@@ -1,6 +1,6 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
-import {NgIf, NgFor, ElementRef} from 'angular2/angular2';
+import {NgIf, NgFor, CSSClass, ElementRef} from 'angular2/angular2';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
 import {IonicView, Animation, Content, Scroll, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
@@ -17,7 +17,7 @@ console.log('Imported', Geo, Weather, Flickr);
 })
 @View({
   templateUrl: 'main.html',
-  directives: [NgIf, NgFor, Content, Scroll, CurrentWeather]
+  directives: [NgIf, NgFor, Content, Scroll, CurrentWeather, WeatherIcon]
 })
 class WeatherApp {
   constructor(Modal: Modal) {
@@ -65,15 +65,21 @@ class WeatherApp {
       this.current = resp;
 
       // TODO: This should be in a custom pipe
+      let c, d;
       for(let i = 0; i < this.current.hourly.data.length; i++) {
-        let t = this.current.hourly.data[i].temperature;
-        this.current.hourly.data[i].temperature = Math.floor(t);
+        c = this.current.hourly.data[i];
+        let t = c.temperature;
+        d = new Date(c.time * 1000);
+        c.temperature = Math.floor(t);
+        c.time_date = d.getHours() % 12 + ' ' + (d.getHours() < 12 ? 'AM' : 'PM');
       }
       for(let i = 0; i < this.current.daily.data.length; i++) {
-        let max = this.current.daily.data[i].temperatureMax;
-        let min = this.current.daily.data[i].temperatureMin;
-        this.current.daily.data[i].temperatureMax = Math.floor(max);
-        this.current.daily.data[i].temperatureMin = Math.floor(min);
+        c = this.current.daily.data[i];
+        let max = c.temperatureMax;
+        let min = c.temperatureMin;
+        c.temperatureMax = Math.floor(max);
+        c.temperatureMin = Math.floor(min);
+        c.time_date = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][new Date(c.time*1000).getDay()];
       }
       console.log('GOT CURRENT', this.current);
     }, (error) => {
@@ -136,15 +142,15 @@ export function main(ionicBootstrap) {
 
 
 let WEATHER_ICONS = {
-  'partlycloudy': 'ion-ios7-partlysunny-outline',
-  'mostlycloudy': 'ion-ios7-partlysunny-outline',
-  'cloudy': 'ion-ios7-cloudy-outline',
-  'rain': 'ion-ios7-rainy-outline',
-  'tstorms': 'ion-ios7-thunderstorm-outline',
-  'sunny': 'ion-ios7-sunny-outline',
-  'clear-day': 'ion-ios7-sunny-outline',
-  'nt_clear': 'ion-ios7-moon-outline',
-  'clear-night': 'ion-ios7-moon-outline'
+  'partlycloudy': 'ion-ios-partlysunny-outline',
+  'mostlycloudy': 'ion-ios-partlysunny-outline',
+  'cloudy': 'ion-ios-cloudy-outline',
+  'rain': 'ion-ios-rainy-outline',
+  'tstorms': 'ion-ios-thunderstorm-outline',
+  'sunny': 'ion-ios-sunny-outline',
+  'clear-day': 'ion-ios-sunny-outline',
+  'nt_clear': 'ion-ios-moon-outline',
+  'clear-night': 'ion-ios-moon-outline'
 };
 
 @Component({
@@ -155,6 +161,7 @@ let WEATHER_ICONS = {
 })
 @View({
   template: '<i class="icon" [class]="weatherIcon"></i>',
+  directives: [CSSClass]
 })
 export class WeatherIcon {
   constructor() {
@@ -162,15 +169,13 @@ export class WeatherIcon {
   onChange(data) {
     console.log('Weather icon onchange', data);
 
-    /*
-    var icon = v;
+    var icon = this.icon;
 
     if(icon in WEATHER_ICONS) {
-      $scope.weatherIcon = WEATHER_ICONS[icon];
+      this.weatherIcon = WEATHER_ICONS[icon];
     } else {
-      $scope.weatherIcon = WEATHER_ICONS['cloudy'];
+      this.weatherIcon = WEATHER_ICONS['cloudy'];
     }
-    */
   }
 }
 
diff --git a/ionic/components/app/test/weather/main.html b/ionic/components/app/test/weather/main.html
index 99dd1c86a0..fb5485a861 100644
--- a/ionic/components/app/test/weather/main.html
+++ b/ionic/components/app/test/weather/main.html
@@ -18,16 +18,16 @@
         <ion-scroll scroll-x="true" id="forecast-scroll">
           <div id="hourly-forecast" *ng-if="current">
             <div class="hourly-hour" *ng-for="#hour of current.hourly.data">
-              <div class="time" inner-html="hour.time"></div><!-- * 1000 | date:'h a'"></div>-->
-              <weather-icon icon="hour.icon"></weather-icon>
+              <div class="time" [inner-html]="hour.time_date"></div><!-- * 1000 | date:'h a'"></div>-->
+              <weather-icon [icon]="hour.icon"></weather-icon>
               <div class="temp">{{hour.temperature}}&deg;</div>
             </div>
           </div>
         </ion-scroll>
         <div *ng-if="current">
           <div class="row" *ng-for="#day of current.daily.data">
-            <div class="col"><span inner-html="day.time * 1000 | date:'EEE'"></span></div>
-            <div class="col"><weather-icon icon="day.icon"></weather-icon></div>
+            <div class="col"><span [inner-html]="day.time_date"></span></div>
+            <div class="col"><weather-icon [icon]="day.icon"></weather-icon></div>
             <div class="col">
               <span class="temp-high">{{day.temperatureMax}}&deg;</span>
               <span class="temp-low">{{day.temperatureMin}}&deg;</span>
diff --git a/ionic/components/app/test/weather/style.css b/ionic/components/app/test/weather/style.css
index d7b1a4b6af..83c91741f0 100644
--- a/ionic/components/app/test/weather/style.css
+++ b/ionic/components/app/test/weather/style.css
@@ -52,7 +52,7 @@ h1,h2,h3,h4,h5 {
   padding: 10px;
 }
 
-.ion-ios7-sunny-outline {
+.ion-ios-sunny-outline {
   color: yellow;
 }