I'm working with `optgroup` elements where I want selection of `option` elements from one group to react differently and pass along different data than others. 

But the handler methods I've set aren't firing here. Am I missing something, or is setting click events on option elements not supported?

```
import {Component} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {City, County, RegionalData} from './interfaces';
import {api} from './api.service';

@Component({
    selector: 'geo-selector',
    template: `
        <div>
            <select name="region-selector">
                <option disabled="disabled" selected="selected">Select a city/county</option>
                <optgroup label="Cities">
                    <option *ngFor="#city of cities" [value]="city" (click)="onCitySelect(city)">{{city.name}}</option>
                </optgroup>
                <optgroup label="Counties">
                    <option *ngFor="#county of counties" [value]="county" (click)="onCountySelect(county)">{{county.name}}</option>
                </optgroup>
            </select>
            <label for="">Zip Search</label>
            <input type="text" name="zip-search"/>
        </div>
                        `,
    providers: [api],
    directives: [NgFor]
})

export class GeoSelector {
        public cities: City[];
        public counties: County[];
        public selectedRegion: any;

        constructor(private _api:api) {
            this.getRegions();
        }

        getRegions(): void {
            this._api.getRegions().then((data: RegionalData) => {
                let cities = this.cities = data.cities;
                let counties = this.counties = data.counties;
                this.selectedRegion = cities[0] ? cities[0] : counties[0];
            });
        }

        onCitySelect(region) : void {
            console.log(region);
        }

        onCountySelect(region): void {
            console.log(region);
        }

}

```