Databinding not working in Polymer Dart

The subject line of the question is a bit ambiguous. I have an main entry file to load (entry.html) which uses a entry.dart script. In the entry.html, I use a custom polymer element card-table. cardtable.html is a simple list. When I load the entry.html first time, everything is good.. I see multiple rows of text printed with static data in my model list. My entry.html has a button, clicking which changes the data model (through entry.dart, I invoke the cardtable.dart). I see the right methods being called and data model change is confirmed, but UI is not updated.

entry.html

<link rel="import" href="cardtable.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<script async src="packages/browser/dart.js"></script>
<script async type="application/dart" src="entry.dart"></script>

<link rel="stylesheet" href="entry.css">
  </head>
  <body>
  <paper-button id="inc_btn" label="+" raisedButton></paper-button>
  <paper-button id="dec_btn" label="-" raisedButton></paper-button>
 <card-table></card-table>
  </body>

entry.dart

var tablec;
void main() {

  initPolymer().run(() {
    Polymer.onReady.then((_) {
      tablec = new Element.tag('card-table');
      var incBtn = querySelector('#inc_btn');
      incBtn.onClick.listen(increment);
  });
}

void increment(Event e) {
  new Future(() {
      tablec.increment();
  }); 
} 
}

card-table.html

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="card-table">
<template>
    <style>
    :host {
      display: block;
      color: green;
    }
    </style>
    <content>
     <div id="dynamic_area">
        <template repeat="{{item in list}}">
        <span>ABCD : {{item}}</span>
        </template>
      </div>
  </content>
</template>

<script type="application/dart" src="cardtable.dart"></script>

</polymer-element>

cardtable.dart

@CustomTag('card-table')
class CardTable extends PolymerElement {

  @observable List list = toObservable(['a', 'b', 'c']);

  CardTable.created() : super.created() {
    polymerCreated();
  }

  void increment() {
    print('INCREMENT');   //is called on clicking + button on entry.html
    list.add('d');
  }

}

You call increment on a new <card-table> you reference using a variable, not the one inside your <body> tag.

Instead of