Question: Seriously stumped here. I have two reactive forms in an Angular project. 

Both have a select control with options stored in class variables.

One form uses simple option strings for employee options, as in:

`["Dan Smith", "Mark Johnson", etc.]`

The other form uses objects, as in:

```js
[
  {
    value: "Dan Smith",
    selected: false,
    hidden: false
  },
  ...
]

```

Stackblitz example: <https://stackblitz.com/edit/angular-nks51y>

In the example I have buttons for adding new random options, and setting a random selected option.

The buttons work on the form which uses simple strings, but don't work with the form using objects {}.

Additionally, the default value isn't set with the object form.

I know I'm missing something, but can't figure out what.

Answer: 
The problem seemed to be the header

I changed headers from 

```
@{'content-type'='text\html'} 

```

to 

```
headers = @{'content-type'='text/html'}

```

and now it displays correctly, thank to @John Hanley for mentioning 'validation' as validator.w3.org was complaining about the header refusing to parse the document
Seems to be a setting in your local browser not a coding issue. You'll need to change the browser settings in order to solve this:

<https://stackoverflow.com/a/17968940/1384539>