javascript - View AngularJS の更新

Question

AngularJS でビューを更新する方法を理解するのに本当に苦労しています。数週間前に学習を始めたばかりなので、簡単に行ってください。これが私がやろうとしていることです: 工場のリソースとしてすべてロードされている写真のグリッドがあります。

services.js

appName.factory('Photo', ['$resource',
    function($resource){
        return $resource('http://localhost:3000/json', {}, {
            query: { method:'GET', isArray:true }
        });
    }
]);

簡単です。そこで、新しい写真のアップロードを有効にしたいと思います。$httpオブジェクトを使用して AJAX 呼び出しを作成し、成功したらグリッドを更新しようとしています。

controllers.js

appName.controller('photogrid', ['$scope', 'Photo',
    function($scope, Photo) {
        $scope.photos = Photo.query();
        console.log($scope.photos);
    }
])

appName.controller('uploadFile', ['$scope', '$http', 'Photo',
    function($scope, $http, Photo) {

        $scope.uploadFile = function(form) {

            var data = new FormData();
            data.append('title', form.title.value);
            data.append('description', form.description.value);
            data.append('location', form.location.value);
            data.append('uploadfile', form.fileupload.files[0]);

            $http({
                method: 'POST',
                url: '/new',
                data: data,
                headers: {'Content-Type': undefined}, 
                transformRequest: angular.identity
            })
            .success(function(data, status, headers, config) {
                form.reset();
                $('#collapseOne').collapse('hide');
                console.log($scope.photos);
                $scope.photos = Photo.query();
                $scope.$apply();
            });

        };
    }
])

view.html

<ul id="photoGrid">
    <li ng-repeat="photo in photos">
        <img ng-src="{{ photo.src }}">
    </li>
</ul>

Photoモデルの新しいインスタンスを作成してpush()メソッド ( $scope.photos.push(newPhoto)) を使用しようとしましたが、うまくいきませんでした。これを行うと、写真に別のリソースが追加されたように見えますが、それでもビューで更新されません。何が欠けているのかわかりません - おそらく単純なものです。