如何通过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>

由于