diff --git a/example/constants.ts.example b/example/constants.ts.example
index c3d5b060..d3da8cf5 100644
--- a/example/constants.ts.example
+++ b/example/constants.ts.example
@@ -5,5 +5,9 @@
 
 
 export const defaultCity = {"id":7, "properties":{"name":"Philadelphia","admin":"PA"}};
+export const defaultScenario = 'RCP85';
+export const defaultVariable = 'pr';
+export const defaultYears = '2070';
+
 export const apiHost = "https://staging.api.futurefeelslike.com/api/";
 export const apiToken = "YOUR_API_TOKEN_HERE";
diff --git a/src/app/charts/line-graph.component.ts b/src/app/charts/line-graph.component.ts
index 33e3d605..8cdb604b 100644
--- a/src/app/charts/line-graph.component.ts
+++ b/src/app/charts/line-graph.component.ts
@@ -17,7 +17,7 @@ import * as $ from 'jquery';
 export class LineGraphComponent {
   public data: ChartData[];
   public extractedData: Array<DataPoint>;
-  public indicator: String;
+  public indicator: string;
   public trendline: Boolean;
   public min: Boolean;
   public max: Boolean;
@@ -33,7 +33,7 @@ export class LineGraphComponent {
   private yScale;                        // D3 scale in Y
   private htmlElement;                   // Host HTMLElement
   private valueline;                     // Base for a chart line
-  private xRange: Array<String>;         // Min, max date range
+  private xRange: Array<string>;         // Min, max date range
   private xData: Array<number>;          // Stores x axis data as integers rather than dates, necessary for trendline math
   private yData: Array<number>;          // Stores just y axis data, multi-use
   private trendData: Array<DataPoint>;   // Formatted data for the trendline
diff --git a/src/app/lab/lab.component.html b/src/app/lab/lab.component.html
index b64c72bf..dfc7b575 100755
--- a/src/app/lab/lab.component.html
+++ b/src/app/lab/lab.component.html
@@ -11,6 +11,7 @@
           <div class="nav-left">
             <div class="dropdown">
               <i class="icon-globe"></i>
+              <label>City</label>
               <input auto-complete
                 [(ngModel)]="cityModel"
                 placeholder="Enter your city"
@@ -22,34 +23,36 @@
                 [value-changed]="onCitySelected()"
                 min-chars="2" />
             </div>
-            <div class="dropdown">
-              <button class="button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+
+            <!-- scenario selector -->
+            <div dropdown class="dropdown">
+              <button dropdownToggle class="button dropdown-toggle" type="button"
+                id="scenarioDropdown" data-toggle="dropdown" aria-haspopup="true"
+                aria-expanded="true">
                 <i class="icon-flash"></i>
-                RCP 4.5
+                {{ selectedScenario }}
                 <i class="icon-angle-down caret"></i>
               </button>
-              <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li><a href="#">Separated link</a></li>
+              <ul dropdownMenu class="dropdown-menu" aria-labelledby="scenarioDropdown">
+                <li *ngFor="let scenario of scenarios">
+                  <a href="#" (click)="updateScenario(scenario)">{{ scenario.name }}</a>
+                </li>
               </ul>
             </div>
+
+            <!-- climate model selector -->
             <div class="dropdown">
-              <button class="button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+              <button class="button" type="button" data-target="#modelOptions"
+                aria-haspopup="true" aria-expanded="true"
+                (click)="smModal.show()">
                 <i class="icon-flash"></i>
-                All Models
-                <i class="icon-angle-down caret"></i>
+                {{ selectedClimateModels }}
+                <label>
+                  <a href="#">Select Models</a>
+                </label>
               </button>
-              <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                <li class="active"><a href="#">All Models</a></li>
-                <li><a href="#">Average</a></li>
-                <li><a href="#">1st Quartile</a></li>
-                <li><a href="#">2nd Quartile</a></li>
-                <li><a href="#">3rd Quartile</a></li>
-                <li><a href="#" data-toggle="modal" data-target="#modelOptions">Select Models</a></li>
-              </ul>
             </div>
+
           </div>
           <div class="nav-right">
             <button class="button button-default">
@@ -59,139 +62,26 @@
         </nav>
         <charts class="charts scrollable"></charts>
       </div>
-    </div>
   </div>
-  <div class="modal modal-small" id="modelOptions" tabindex="-1" role="dialog" aria-labelledby="modelOptions">
-    <div class="modal-dialog" role="document">
+  <div bsModal #smModal="bs-modal" class="modal modal-small" id="modelOptions" tabindex="-1"
+    role="dialog" aria-labelledby="modelOptions" aria-hidden="true" [config]="{backdrop: false}">
+    <div class="modal-dialog modal-sm" role="document">
       <div class="modal-content">
         <div class="modal-body">
-          <button type="button" class="button button-modal-close" data-dismiss="modal" aria-label="Close">
+          <button type="button" class="button button-modal-close" data-dismiss="bs-modal"
+            (click)="updateClimateModels(); smModal.hide()" aria-label="Close">
             <span class="icon icon-cancel"></span>
           </button>
           <h4 class="modal-title">Select Models</h4>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 1
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 2
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 3
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 4
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 5
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 6
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 7
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 8
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 9
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 10
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 11
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 12
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 13
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 14
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 15
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 16
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 17
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 18
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 19
-            </label>
-          </div>
-          <div>
+          <div *ngFor="let climateModel of climateModels">
             <label>
-              <input type="checkbox" name="checkbox" value="value">
-              Model 20
+              <input type="checkbox" name="checkbox" value="value" [(ngModel)]="climateModel.selected">
+              {{ climateModel.name }}
             </label>
           </div>
         </div>
         <div class="modal-footer">
-          <button class="button">Update</button>
+          <button class="button" (click)="updateClimateModels(); smModal.hide();" data-dismiss="bs-modal">Update</button>
         </div>
       </div>
     </div>
diff --git a/src/app/lab/lab.component.ts b/src/app/lab/lab.component.ts
index f9319eab..5a883d6a 100755
--- a/src/app/lab/lab.component.ts
+++ b/src/app/lab/lab.component.ts
@@ -2,32 +2,51 @@
  * Climate Change Lab
  * App Component
  */
-import { Component, ViewEncapsulation } from '@angular/core';
-import { NavbarComponent } from '../navbar/navbar.component';
+import { Component, OnInit, ViewEncapsulation, ViewContainerRef } from '@angular/core';
 import { SidebarComponent } from '../sidebar/sidebar.component';
 import { ChartsContainerComponent } from '../charts/charts-container.component';
+import { ClimateModel, Scenario } from '../models/chart.models';
 import { ChartService } from '../services/chart.service';
 
 import { AutoCompleteDirective } from "../auto-complete";
 import { AutoCompleteComponent } from "../auto-complete";
 
-import { apiHost, defaultCity } from "../constants";
+import { DROPDOWN_DIRECTIVES, MODAL_DIRECTIVES, BS_VIEW_PROVIDERS } from 'ng2-bootstrap/ng2-bootstrap';
+
+import { apiHost, defaultCity, defaultScenario } from "../constants";
+import { NavbarComponent } from '../navbar/navbar.component';
+
+import * as _ from 'lodash';
+
 
 @Component({
   selector: 'cc-lab',
-  directives: [NavbarComponent, SidebarComponent, ChartsContainerComponent],
+  directives: [DROPDOWN_DIRECTIVES, MODAL_DIRECTIVES,
+               NavbarComponent, SidebarComponent, ChartsContainerComponent],
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './lab.component.html'
+  templateUrl: './lab.component.html',
+  viewProviders: [BS_VIEW_PROVIDERS]
 })
-export class LabComponent {
+export class LabComponent extends OnInit {
   name = 'Climate Lab';
 
-  constructor(private chartService: ChartService) {
-    this.cityModel = this.cityValueFormatter(defaultCity);
+  constructor(viewContainerRef: ViewContainerRef, private chartService: ChartService) {
+    super();
+
+    // TODO: does not work
+    // necessary to catch application root view container ref. see:
+    // https://valor-software.com/ng2-bootstrap/#/modals
+    this.viewContainerRef = viewContainerRef;
   }
 
   public apiCities: string = apiHost + "city/?search=:keyword&format=json";
   public cityModel;
+  public climateModels: ClimateModel[];
+
+  public scenarios: Scenario[];
+  public selectedScenario: string;
+
+  public viewContainerRef: ViewContainerRef;
 
   // custom formatter to display list of options as City, State
   public cityListFormatter(data: any): string {
@@ -52,4 +71,42 @@ export class LabComponent {
       this.chartService.updateCity(value);
     };
   }
+
+  public updateClimateModels() {
+    let models: string[] = this.climateModels.filter(function(model) {
+      return model.selected;
+    }).map(function(model) {
+      return model.name;
+    });
+
+    this.chartService.updateClimateModels(models);
+  }
+
+  public updateScenario(scenario: Scenario) {
+    this.selectedScenario = scenario.name;
+    this.chartService.updateScenario(scenario.name);
+  }
+
+  getClimateModels() {
+    this.chartService.loadClimateModels();
+    this.chartService.getClimateModels().subscribe(data => {
+      this.climateModels = data;
+    });
+  }
+
+  getScenarios() {
+    this.chartService.loadScenarios();
+    this.chartService.getScenarios().subscribe(data => {
+      // TODO: it would be nice to populate a tooltip for the scenario list items with their
+      // descriptions once angular2-bootstrap is in place
+      this.scenarios = data;
+    });
+  }
+
+  ngOnInit() {
+    this.cityModel = this.cityValueFormatter(defaultCity);
+    this.selectedScenario = defaultScenario;
+    this.getScenarios();
+    this.getClimateModels();
+  }
 }
diff --git a/src/app/models/chart.models.ts b/src/app/models/chart.models.ts
index 91f111cd..7c32ee59 100644
--- a/src/app/models/chart.models.ts
+++ b/src/app/models/chart.models.ts
@@ -1,9 +1,19 @@
 export class ChartData {
-  indicator: String;
+  indicator: string;
   data: Array<DataPoint>;
 }
 
 export class DataPoint {
-  date: String;
+  date: string;
   value: Number;
-}
\ No newline at end of file
+}
+
+export class ClimateModel {
+    name: string;
+    selected: boolean;
+}
+
+export class Scenario {
+    name: string;
+    description: string;
+}
diff --git a/src/app/services/chart.service.ts b/src/app/services/chart.service.ts
index 138744b9..aec3e789 100644
--- a/src/app/services/chart.service.ts
+++ b/src/app/services/chart.service.ts
@@ -3,8 +3,8 @@ import {Headers, Http, RequestOptions, Response, URLSearchParams} from '@angular
 import {Observable, Observer} from "rxjs";
 import 'rxjs/Rx';
 
-import { ChartData } from '../models/chart.models';
-import { apiHost, apiToken, defaultCity } from "../constants";
+import { ChartData, ClimateModel, Scenario } from '../models/chart.models';
+import { apiHost, apiToken, defaultCity, defaultScenario, defaultVariable, defaultYears } from "../constants";
 
 import * as moment from 'moment';
 import * as _ from 'lodash';
@@ -17,22 +17,31 @@ import * as _ from 'lodash';
 @Injectable()
 export class ChartService {
 
-    // FIXME: using dummy options for API query
-    dataQueryOptions: any = {
+    dataQueryOptions = {
       cityId: defaultCity.id,
-      scenario: 'RCP85',
-      variables: 'pr',
-      years: '2070'
+      models: null, // default to all
+      scenario: defaultScenario,
+      variables: defaultVariable,
+      years: defaultYears
     };
 
-    // TODO: pretty label
-    chartList = ["pr"];
+    // TODO: pretty label for variable name?
+    chartList = [defaultVariable];
 
     private chartData: Observable<ChartData[]>;
     private chartDataObserver: Observer<ChartData[]>;
 
+    private climateModels: Observable<ClimateModel[]>;
+    private climateModelObserver: Observer<ClimateModel[]>;
+
+    private scenarios: Observable<Scenario[]>;
+    private scenarioObserver: Observer<Scenario[]>;
+
     constructor(private http: Http) {
         this.chartData = new Observable<ChartData[]>(observer => this.chartDataObserver = observer);
+        this.climateModels = new Observable<ClimateModel[]>(observer =>
+                                                            this.climateModelObserver = observer);
+        this.scenarios = new Observable<Scenario[]>(observer => this.scenarioObserver = observer);
     }
 
     get() {
@@ -57,6 +66,14 @@ export class ChartService {
         return this.chartData;
     }
 
+    getClimateModels(): Observable<ClimateModel[]> {
+        return this.climateModels;
+    }
+
+    getScenarios(): Observable<Scenario[]> {
+        return this.scenarios;
+    }
+
     loadChartData(): void {
 
         let options = this.dataQueryOptions;
@@ -69,6 +86,9 @@ export class ChartService {
         searchParams.append('variables', options.variables);
         searchParams.append('years', options.years);
         searchParams.append('format', 'json');
+        if (options.models) {
+            searchParams.append('models', options.models);
+        }
 
         // append authorization header to request
         let headers = new Headers({
@@ -82,6 +102,36 @@ export class ChartService {
             });
     }
 
+    loadClimateModels(): void {
+        let url = apiHost + 'climate-model/';
+
+        // append authorization header to request
+        let headers = new Headers({
+            'Authorization': 'Token ' + apiToken
+        });
+        let requestOptions = new RequestOptions({headers: headers});
+        this.http.get(url, requestOptions)
+            .map( resp => resp.json())
+            .subscribe(resp => {
+                this.climateModelObserver.next(resp || {} as ClimateModel[]);
+            });
+    }
+
+    loadScenarios(): void {
+        let url = apiHost + 'scenario/';
+
+        // append authorization header to request
+        let headers = new Headers({
+            'Authorization': 'Token ' + apiToken
+        });
+        let requestOptions = new RequestOptions({headers: headers});
+        this.http.get(url, requestOptions)
+            .map( resp => resp.json())
+            .subscribe(resp => {
+                this.scenarioObserver.next(resp || {} as Scenario[]);
+            });
+    }
+
     // return an array of date strings for each day in the given year
     getDaysInYear(year: number): string[] {
         var oneDate = moment.utc(+year + '-01-01', 'YYYY-MM-DD', true);
@@ -95,11 +145,11 @@ export class ChartService {
 
     // map array of daily readings to date for each reading and drop top-level year key
     convertChartData(data: any): ChartData[] {
-        let me = this;
+        let self = this;
         let indicators = [];
         let chartData: ChartData[] = [];
         _.each(_.keys(data), function(key) {
-            let days: string[] = me.getDaysInYear(key);
+            let days: string[] = self.getDaysInYear(key);
             _.each(_.keys(data[key]), function(indicator) {
                 // make array of [date, value] pairs with zip, then convert to keyed object
                 var indicatorData = _.map(_.zip(days, data[key][indicator]), function(arr) {
@@ -129,4 +179,19 @@ export class ChartService {
         this.dataQueryOptions.cityId = city.id;
         this.loadChartData();
     }
+
+    public updateClimateModels(models: string[]): void {
+        if (models.length) {
+            this.dataQueryOptions.models = models.join(',');
+        } else if (this.dataQueryOptions.models) {
+            // default to all by specifying none
+            this.dataQueryOptions.models = null;
+        }
+        this.loadChartData();
+    }
+
+    public updateScenario(scenario: string): void {
+        this.dataQueryOptions.scenario = scenario;
+        this.loadChartData();
+    }
 }