javascript - AngularJS と AngularFire を使用して「アクティブな要素」への参照を保存する方法は?

Question

メモのリストとアクティブな選択されたメモをテキストエリアに表示するシンプルなメモアプリがあります。リスト内のメモを選択して編集できるようにしたい。

私のコントローラーには、メモのリスト内の項目を指す「アクティブな」変数があります。AngularJS だけを使用すると、これは正常に機能します。AngularFire を追加すると、テキストエリアのコンテンツを変更するたびに、アクティブな要素が接続されなくなります。このアクティブな参照を保存するのは悪い考えですか?

コントローラーの関連部分は次のとおりです。

var notesApp = angular.module('notesApp', ['firebase']);
function NotesCtrl($scope, angularFire) {
    var fireBaseUrl = new Firebase('https://mynotesapp.firebaseio.com/notes');
    $scope.notes = [];
    $scope.select = function (note) {
        $scope.active = note;
    };
    angularFire(fireBaseUrl, $scope, 'notes').then(function () {
        $scope.active = $scope.notes[0];
    });
}

そしてHTML：

<ul>
  <li ng-repeat="note in notes" ng-class="{active: note == active}">
    <a href="#" ng-click="select(note)">{{ note.title }}</a>
  </li>
</ul>
<textarea ng-model="active.body"></textarea>

完全な例はhttp://jsfiddle.net/4zsMH/です。