在AngularJS中的GET请求之后更新页面内容

Question

在我的网页上，我有一个ng-repeat='item in items'来遍历$scope.items。 $scope.items在调用$scope.listItems时获取其数据，该数据使用$ http从连接到数据库的REST API获取数据。

最初在控制器中调用$scope.items来初始化$ scope.items并用数据填充它。

现在，当我添加时，我知道$ http正在运行，因为更改会反映在数据库中。根据我的控制台日志记录，$scope.items也会更改。但是，页面不会更新以反映更改。

我想我应该使用$scope.$apply()，但我只是得到“错误：$ digest已在进行中”所以我没有正确使用它。我是AngularJS的新手，并且一般都不知道很多Javascript，所以请忍受我的无知。

这是我的代码。

var app = angular.module('App', []);
app.controller('AppCtrl', function ($scope, $http) {
  $scope.listItems = function () {
    $http({method: 'GET', url: '/api/items'})
      .success(function (data, status, headers, config) {
        $scope.items = data;
        console.log($scope.items);
      })
      .error(function (data, status, headers, config) {
        $scope.items = data || 'Request failed';
        $scope.status = status;
      });
  }
  $scope.addItem = function () {
    $scope.itemDetails.node_type = 'record'; // since input hidden doesnt work
    $http({method: 'POST', url: '/api/items/add', data: $scope.itemDetails, 
           headers: {'Content-Type': 'application/json'}})
      .success(function (data, status, headers, config) {
        $scope.status = status;
        $scope.listItems();
        //$scope.$apply(); // throws an error
      })
      .error(function (data, status, headers, config) {
        $scope.status = status;
      });
  }
  $scope.listItems(); // initialize $scope.items
});