I have a class named Session defined as follows:

class Session {
  constructor(
    public id: string,
    public title: string
  ) {}
}

I created some instances of the class and exported them:

export const LocalSession = new Session("local", "Local Session");
export const RemoteSession = new Session("remote", "Remote Session");

I also created a list of the instances and exported it:

export const Sessions = [
  LocalSession,
  RemoteSession
];

I have a component that uses the list and allows the user to select a session:

import { RemoteSession, Sessions } from './session';

@Component({
  selector: 'app-device',
  templateUrl: './device.component.html',
  styleUrls: ['./device.component.css']
})
export class DeviceComponent {
  session = RemoteSession;
  sessions = Sessions;
}

A <select> is used to choose the session:

<select [(ngModel)]="session">
  <option *ngFor="let s of sessions" [value]="s">{{ s.title }}</option>
</select>

However, upon loading the page in a browser, I find that LocalSession is always selected by default instead of RemoteSession. Using Chrome's Inspector reveals that every <option> has a value of [object Object].

If I change the value attribute to:

[value]="s.id"

...then no item is selected by default. I would have to also change Sessions so that it contained a list of IDs instead of instances. I would like Sessions to remain a list of instances if at all possible. How can I set the default selection while still using instances everywhere?