Using an ObservableList to update a template in Dart
<p>I am trying to bind an ObservableList to a template, and I am a bit confused about how it is working. In the following example, when I click the button, the instance of the list that is displayed by iterating through the elements is updated, but the instance that is used directly is not.  </p>

<h1>dart:</h1>

<pre><code>@CustomTag('my-observing-list')
class ObservingList extends PolymerElement {

  ObservingList.created() : super.created();

  @observable ObservableList theList = new ObservableList.from([0, 1, 2, 3, 4]);

  addElement(var x) {
    theList.add(5);
  }
}
</code></pre>

<h1>html:</h1>

<pre><code>&lt;polymer-element name="my-observing-list"&gt;
    &lt;template&gt;
        &lt;template repeat="{{l in theList}}"&gt;
            {{l}}
        &lt;/template&gt;
        {{theList}}
        &lt;button on-click="{{addElement}}"&gt;&lt;/button&gt;
    &lt;/template&gt;
&lt;/polymer-element&gt;
</code></pre>

<p>Further adding to my confusion, if I add an observable integer to my element, include it in the template, and update it when the button is clicked, it causes <strong>both</strong> instances of the list to be updated when the button is clicked.  </p>

<h1>dart:</h1>

<pre><code>class ObservingList extends PolymerElement {

  ObservingList.created() : super.created();

  @observable ObservableList theList = new ObservableList.from([0, 1, 2, 3, 4]);
  @observable var number = 0;

  addElement(var x) {
    theList.add(5);
    number = 1;
  }
}
</code></pre>

<h1>html:</h1>

<pre><code>&lt;polymer-element name="my-observing-list"&gt;
    &lt;template&gt;
        &lt;template repeat="{{l in theList}}"&gt;
            {{l}}
        &lt;/template&gt;
        {{theList}}
        {{number}}
        &lt;button on-click="{{addElement}}"&gt;&lt;/button&gt;
    &lt;/template&gt;
&lt;/polymer-element&gt;
</code></pre>

<p>Can someone explain what's happening here?</p>