I am trying to write a simple single-page web app in Dart using the "observatory" package. What it should do is display all the data in the "Name" collection, retrieve the user's input, add lastly that input to both the on-screen list and the collection. The input gets added to the unordered list, but that's all that happens. I'm not sure what I'm doing wrong. Here is my Dart code:

```
import 'dart:html';
import 'package:objectory/objectory_browser.dart';

class Name extends PersistentObject {
  String get collectionName => "Name";

  String get first => getProperty("first");
  set first(String value) => setProperty("first", value);

  String get last => getProperty("last");
  set last(String value) => setProperty("last", value);
}

const uri = 'mongodb://localhost/dosdart1';

registerClasses() {
  objectory.registerClass(Name, () => new Name(), () => new List<Name>());
}

void main() {
  objectory = new ObjectoryWebsocketBrowserImpl(uri, registerClasses, false);
  loadNames();
  querySelector('#output').text = 'Your Dart app is running.';
  var btn = querySelector('#btn');
  btn.onClick.listen(addName);
}

Future display(name) {
  var completer = new Completer();
  name.fetchLinks().then((__) {
    var ul = querySelector('#names');
    var li = new LIElement()
    ..appendText("${name.first} ${name.last}");
    ul.append(li);
    completer.complete(true);
  });
  return completer.future;
}

loadNames() {
  objectory.initDomainModel().then((_) {
    return objectory[Name].find();
  }).then((names){
    return Future.wait(names.map((name) => display(name)));
  }).then((_) {
    objectory.close();
  });
}

addName(MouseEvent e) {
  var name = new Name();
  InputElement firstElement = querySelector('#first');
  InputElement lastElement = querySelector('#last');
  name.first = firstElement.value;
  name.last = lastElement.value;
  objectory.initDomainModel().then((_){
    name.save();
    return;
  }).then((_) {
    objectory.close();
  });
  display(name);
}

```

And here is my web page:

```
<!DOCTYPE html>
<!--
  Copyright (c) 2015, <your name>. All rights reserved. Use of this source code
  is governed by a BSD-style license that can be found in the LICENSE file.
-->

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/google/stagehand">
    <title>hybrid_dart</title>
    <link rel="stylesheet" href="styles.css">
    <script async src="main.dart" type="application/dart"></script>
    <script async src="packages/browser/dart.js"></script>
</head>

<body>
  <div id="output"></div>
  <p><label for="first">First name:</label><input type="text" id="first" name="first"></p>
  <p><label for="last">Last name:</label><input type="text" name="last" id="last"></p>
  <p><button id="btn" name="btn" title="Insert">Insert</button></p>
  <ul id="names">
  </ul>
</body>
</html>

```

Does anybody have any ideas?