AngularJS - 视图未从模态对话框更新

Question

我尝试在将数据保存到数据库时更新视图。

main.html

<div ng-controller='sitesController'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-body'>
                <form ng-submit="createSite()">
                    <label>Site Name</label>
                    <input type="text" ng-model="siteName"/>                                                                                                                                                                                            
                    <button type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>

sitesController.js

app.controller('sitesController', ['$scope', '$resource', function ($scope, $resource) {

    var Site = $resource('/api/sites');

    Site.query(function (results) {
        $scope.sites = results;
    });

    $scope.sites = []

    $scope.createSite = function () {
        var site = new Site();
        site.name = $scope.siteName;
        site.$save(function (result, scope) {
            scope.sites.push(result);
            scope.$apply();
        });
    }
}]);

单击“保存”按钮时，数据会正确存储在服务器中，但UI不会刷新（手动刷新会显示新条目）。 在模态外移动表单时，一切正常。

有什么想法吗？ 感谢