items.query is not a function这是怎么回事

<div ng-app="myApp">
    <div ng-controller="firstcontroller">
        <h1>Shop!</h1>
        <table>
            <tr ng-repeat="item in items"></tr>
            <td>{{item.title}}</td>
            <td>{{item.description}}</td>
            <td>{{item.price | currency}}</td>
            </tr>
        </table>
    </div>
</div>
    <script>
var app = angular.module("myApp", []);
app.factory('items', function() {
    var items = {};
    items.query = function() {
        return [{
            title: 'Paint pots',
            description: 'Pots full  of paint',
            price: 3.95
        }, {
            title: 'Polka dots',
            description: 'Dots with polka',
            price: 2.95
        }, {
            title: 'Pebbles',
            description: 'Just  little  rocks',
            price: 6.95
        }];
    }
    return items;
})
app.controller('firstcontroller',['$scope','items',function($scope,items){
    $scope.items=items.query();
}])
</script>

浏览可以正确运行代码，但是不显示数据。只显示出

<div ng-app="myApp">
    <div ng-controller="firstcontroller">
        <h1>Shop!</h1>
        {{items}}
    </div>
</div>

代码更改成这样，可以显示出数据，说明数据已经绑定成功了，为什么使用这段代码，无法显示数据？

<table>
            <tr ng-repeat="item in items"></tr>
            <td>{{item.title}}</td>
            <td>{{item.description}}</td>
            <td>{{item.price  | currency}}</td>
            </tr>
            </table>

初学Angular，如果，有哪里不正确，请各位指出。

---

第一个tr后面多了一个／tr吧 这样里面没东西，所以已经repeat了只是repeat出了一堆空