gistfile1.dart

in friends.html
<table class="condensed-table" id="friends-tbl">
  <tbody>
    <tr template repeat="{{key in friends.keys}}">
      <td>{{friends[key].displayName}}</td><td><i>{{friends[key].status}}</i></td>
    </tr>
  </tbody>
</table>
 
in friends.dart
import 'package:polymer/polymer.dart';
 
// Tried both with and without the wrapper on the Friend class, here is the wrapper
@observable
class ObservableFriend {
  ObservableFriend(this.ID, this.displayName);
  static ObservableFriend fromFriend(Friend f) {
    ObservableFriend of = new ObservableFriend(f.ID, f.displayName);
    of.status = f.status;
    return of;
  }
  Friend toFriend() {
    Friend f = new Friend(this.ID, this.displayName);
    f.status = this.status;
    return f;
  }
  int ID;
  String status;
  String displayName;
}
 
@CustomTag('app-friends')
class AppFriends extends PolymerElement {
@observable Map<int, ObservableFriend> friends = toObservable(new Map<String, ObservableFriend>());
..
this.friends = toObservable(app.friends, deep: true); // TAG-1 commenting this line out exposes the problem
for(int key in app.friends.keys) { // TAG-2
  print('Looping $key');
  this.friends[key] = ObservableFriend.fromFriend(app.friends[key]); // TAG-3
  app.Status(this.friends[key].toFriend());
}

You can't put @observable on a class. You must instead put it on fields. I opened https://code.google.com/p/dart/issues/detail?id=15396 to help track.

Also, use final Map friends instead of @observable Map friends, because you only care about changes to the map contents (and not the field itself).

For fromFriend, consider using a named constructor:

  ObservableFriend.fromFriend(Friend f)

You might want to actually make Friend observable with the right annotations, instead of wrapping it.