How to refresh an ng-repeat list when the backing model has been updated via ng-click?

I'm rather new to AngularJS so I presume this is going to be something about confusing scope.

I'm trying to get a ng-repeat list watching a service on the scope to update when I push a new item to the service backing model from a ng-click anchor link.

An example failing fiddle is here: 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>

Thanks