angularjs计算属性在模型更改后未更新

我在一个表中有一个简单的活动查看器，其中列出了活动及其在数据库中的状态（已读或未读）。页面上有一个计数器，显示有多少活动未读。根据具体情况，每个活动都提供了

标记已读

或

标记未读

的选项。由于某种原因，

模型更新后，计数器上的计算值没有变化

控制器

function Activity($scope, $http, $templateCache)
{
    $http.get('/activity/get').success(function(data, status)
    {
        $scope.activities = data;
    });

    $scope.totalActivities = function()
    {
        var count = 0;

        angular.forEach($scope.activities, function(activity)
        {
            count += activity.seen == 0 ? 1 : 0;
        });

        return count;
    }

    $scope.updateActivity = function(activity)
    {
        activity.seen = activity.seen == 0 ? 1 : 0;

        $http({
            method: 'PUT',
            url:    '/activity/' + activity.id,
            data:   { seen: activity.seen }
        })
        .success(function(data, status)
        {
            console.log(data);
        });
    }
}

<span class="badge badge-alert">{{ totalActivities() }}</span>

计数器

function Activity($scope, $http, $templateCache)
{
    $http.get('/activity/get').success(function(data, status)
    {
        $scope.activities = data;
    });

    $scope.totalActivities = function()
    {
        var count = 0;

        angular.forEach($scope.activities, function(activity)
        {
            count += activity.seen == 0 ? 1 : 0;
        });

        return count;
    }

    $scope.updateActivity = function(activity)
    {
        activity.seen = activity.seen == 0 ? 1 : 0;

        $http({
            method: 'PUT',
            url:    '/activity/' + activity.id,
            data:   { seen: activity.seen }
        })
        .success(function(data, status)
        {
            console.log(data);
        });
    }
}

<span class="badge badge-alert">{{ totalActivities() }}</span>

{{totalActivities（）}

表格行+按钮

<tr ng-repeat="activity in activities" ng-class="{ 'activity-read': activity.seen == 1 }"> 
    <td>
        <button class="btn btn-default" ng-click="updateActivity(activity)"><span>@{{ 0 == activity.seen ? 'Mark Read' : 'Mark Unread' }}</span></button>
    </td>
</tr>


@{{0==activity.seen？'Mark Read'：'Mark Unread'}

导航模板（单独的代码块）


@if（Sentry:：hasAccess（'admin'））
@恩迪夫

计数器在第一次加载时工作正常，但是任何对模型的更新都需要页面刷新才能显示新的计算。
有些信息告诉我，我们在这里没有看到您代码的相关部分

当我使用
$timeout
而不是
$http
时，一切正常：

var Activity = function($scope, $timeout) {
    console.log('creating controller');

    var fakeData = [
          {name: 'One',   seen: 0}, 
          {name: 'Two',   seen: 0},
          {name: 'Three', seen: 1},
          {name: 'Four',  seen: 0}
    ];

    $timeout(function () {
        $scope.activities = fakeData;
        console.log('data returned');
    }, 500);

    $scope.totalActivities = function () {
        var count = 0;

        angular.forEach($scope.activities, function (activity) {
            count += activity.seen === 0 ? 1 : 0;
        });

        return count;
    };

    $scope.updateActivity = function (activity) {
        activity.seen = activity.seen === 0 ? 1 : 0;

        var payload = {
            method: 'PUT',
            url: '/activity/' + activity.id,
            data: {
                seen: activity.seen
            }
        };

        $timeout(function () {
            console.log(payload);
        }, 200);
    };
};

jsFiddle Here:
我也在计算属性和$watch等方面挣扎了一段时间，无法想象它会如此困难，然后我找到了这个解决方案：


只需使用Javascript本身的强大功能来定义对象getter和setter。不需要$watch，非常简单。
所以我将计数器移动了一点，似乎这是一个
范围
问题，可能吗？请参阅我问题中的更新代码。计数器位于原始呼叫控制器之外的单独div中。我移动了
ng控制器
块，使其同时包含计数器和表。这就是最好的解决方法吗？我发现
$emit
和
$on
后，就解决了我的
$scope
问题。我设置了一个父控制器，并从子控制器向上发送了值，瞧！感谢获得答案的最好方法是设置一个JSFIDLE或plnkr来重现问题。