title: Angular2 not iterating through array of models
body: <p>I have the following TypeScript:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  export class Spirit {
    id: number;
    name: string;
    description: string;
  }
  
  @Component({
      selector: 'my-app',
      styles:[`
        .selected {
          background-color: #CFD8DC !important;
          color: white;
        }
        .spirits {
          margin: 0 0 2em 0;
          list-style-type: none;
          padding: 0;
          width: 15em;
        }
        .spirits li {
          cursor: pointer;
          position: relative;
          left: 0;
          background-color: #EEE;
          margin: .5em;
          padding: .3em 0;
          height: 1.6em;
          border-radius: 4px;
        }
        .spirits li.selected:hover {
          background-color: #BBD8DC !important;
          color: white;
        }
        .spirits li:hover {
          color: #607D8B;
          background-color: #DDD;
          left: .1em;
        }
        .spirits .text {
          position: relative;
          top: -3px;
        }
        .spirits .spirit_id {
          display: inline-block;
          font-size: small;
          color: white;
          padding: 0.8em 0.7em 0 0.7em;
          background-color: #607D8B;
          line-height: 1em;
          position: relative;
          left: -1px;
          top: -4px;
          height: 1.8em;
          margin-right: .8em;
          border-radius: 4px 0 0 4px;
        }`
        ],
      template:`
      &lt;h1&gt;{{title}}&lt;/h1&gt;
      &lt;h2&gt;Spirit Creatures&lt;/h2&gt;
      &lt;ul class="spirits"&gt;
        &lt;li *ngFor="#spirit of spirits"
        [class.selected]="spirit === selectedSpirit" 
        (click)="onSelect(spirit)"&gt;
          &lt;span class="spirit"&gt;&lt;span class="spirit_id"&gt;{{selectedSpirit.id}}.&lt;/span&gt;&lt;span class="spirit_name"&gt; {{selectedSpirit.name}}&lt;/span&gt;&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- &lt;div&gt;
        &lt;label&gt;name: &lt;/label&gt;
        &lt;input [(ngModel)]="spirit.name" placeholder="name"&gt;
      &lt;/div&gt; --&gt;
      `
  })
  
  export class AppComponent {
    spirits = SPIRITS;
    selectedSpirit: Spirit;
    title = 'Order of the Mouse: Current Characters';
    onSelect(spirit: Spirit) { this.selectedSpirit = spirit; }
  }
  
  var SPIRITS: Spirit[] = [
    { "id": 1, "name": "Lene-Cow", description:"Lene-Cow is the spirit animal of Ekarel Pelican. Lene-Cow is a short, pleasantly rotund Cow spirit whom the party milks when they are in need of nourishment. Lene-Cow must be milked regularly or she becomes over-filled and uncomfortable." },
    { "id": 11, "name": "Rabbit-Cat", description:"" },
    { "id": 12, "name": "Dragon-Bear", description:"Drogon Barre is a slender, moderately tall man in his early 30s. He generally wears a black jacket and jeans. His spiritual creature is the Dragon-Bear." },
    { "id": 13, "name": "Deer-Wolf", description:"Deer-Wolf always goes by her spiritual creature's name, having switched to it after she began her career as undercover police office. She used to be called Erica [Redacted]." },
    { "id": 14, "name": "Clown-Fox", description:"Christopher James Jones, also known as Clown-Fox, is the mercurial sort and prone to changing his appearance and demeanor as the whim takes him. He is often thought to be both charming and threatening by the men, and sometimes the women, around him. He currently presents an effete persona, mimicking many aspects of gay culture, though most believe this to be a deliberate ruse." },
    { "id": 15, "name": "Furry-Giraffe", description:"Though her spirit animal name is the Furry-Giraffe, FG also goes by the name Harrian sometimes, and sometimes by Lindsay Kidson. Furry-Giraffe is a nurse in training working at St Bartholemew's Hospital in Greater London. She is a member of the Freemasons and involved in a vast conspiracy with altruistic goals, seeking to clear Drogon Barre's name after a campaign to discredit him instigated by a rival lodge, The Noah Masons. The events depicted here lead many other persons to follow Drogon Barre and attempt to get him to write them into the story, but he is usually too concerned for their safety to do so, being careful only to edit in those who use one of several complex secret languages and don't keep trying to solicit him for sex. Furry-Giraffe ofter wears hipster glasses, but not always, and when doing so goes by the spiritual name Giraffe-Furry." },
    { "id": 16, "name": "ThePurpleRabbits", description:"" },
    { "id": 17, "name": "Tiger-Hummingbird", description:"" },
    { "id": 18, "name": "The WIZARD", description:"You know nothing about this man yet, except that Deer-Wolf calls him The Wizard, and says he killed her sister." },
    { "id": 19, "name": "Fire-Stoat", description:"Norman, aka Fire-Stoat, is an angular faced man in his late sixties. His strident intellegence is matched by a penchant for semi-aggressive 'plays' which he acts out online. You have known him for several months prior to the events in The Order of the Mouse." },
  ];
  </code></pre>
  
  <p>Which used to work fine until I started trying to iterate through the models I have, rather than calling each individually. For a while the code simply repeated the same character names over and over again; when I clicked on an individual item to select it, all other items would change to the same name and id. I started from scratch, but now the code won't iterate through the ids and names at all (don't worry about the descriptions -- I put them in the model but I'm aware they are not being passed into the template yet).</p>