angularjs - バッキングモデルがng-clickで更新されたときに、ng-repeatリストを更新するにはどうすればよいですか？

Question

私はAngularJSにかなり慣れていないので、これはスコープを混乱させることになると思います。

ng-clickアンカーリンクからサービスバッキングモデルに新しいアイテムをプッシュしたときに、スコープ上のサービスを監視しているng-repeatリストを取得しようとしています。

失敗したフィドルの例はここにあります：http：//jsfiddle.net/znFwY/

JS：

'use strict';

angular.module('myApp', [])
    .factory('Order', function () {
        return {
            packages: {
                theList: [],
                list: function () {
                    return this.theList;
                },
                push: function (p) {
                    if (p === undefined || !!this.theList[p.title]) return;
                    this.theList[p.title] = p;
                    console.log('pushed ' + p.title);
                },
                contains: function (p) {
                    return  !!this.theList[p.title];
                },
                print: function () {
                    console.log(this.theList);
                }
            }
        }
    })
    .controller('AppCtrl', function ($scope, $http, $location, Order) {
        $scope.order = Order;
        $scope.data = {
            packages: [
                {title: 'one'},
                {title: 'two'},
                {title: 'three'},
            ]
        };
    })
;

HTML：

<div ng-app="myApp">
    <div ng-controller="AppCtrl">

        <ul id="package-list">
            <li ng-repeat="package in data.packages | orderBy:package.order">
                <a ng-click="order.packages.push(package)" ng-class="{selected: order.packages.contains(package)}">{{package.title}}</a>
            </li>
        </ul>

        <ul id="basket-list">
            <li ng-repeat="package in order.packages.list() | orderBy:package.order"> {{package.title}}</li>
        </ul>

        <a ng-click="order.packages.print()">print list</a>
    </div>
</div>

ありがとう