JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<div ng-app="App">
    <div class="head" ng-controller="head">
        {{resolved}} of {{total}} Items resolved
    </div>
    <div class="items" ng-controller="index">
        <div class="item" ng-repeat="(index, item) in items">
            Item #{{index}}<br>
            <a href="#" ng-click="resolve()" ng-show="!item.resolved">resolve</a>
            <strong ng-show="item.resolved">resolved!</strong>
        </div>
    </div>
</div>

CSS

body {
    font-family:Arial;
    font-size:12px;
}

a {
    color:blue;
}

.head {
    background:#e1e1e1;
    margin:10px 0;
    padding:10px;
}

.items .item {
    margin:10px 0;
    padding:10px;
    border:1px solid #e1e1e1;
}

JavaScript

var app = angular.module('App',[]);

//the items factory does a lot more in the real application.
//so i need some kind of separation
app.factory('Items', function($rootScope) {
    var that = {}, my = {};
   
    //stores the items
    my.items = [
        { resolved: false },
        { resolved: true },
        { resolved: false },
        { resolved: false }
    ];
    
    //get all items
    that.index = function() {
        return my.items;
    };
    
    //get only resolved items
    that.resolved = function() {
        return _.filter(my.items, function(item) {
            return item.resolved;
        });
    };
    
    //resolve an item by index
    that.resolve = function(index) {
        my.items[index].resolved = true;
    };
    
    return that;
});

//index controller displays all items
app.controller('index', function($scope, Items) {
    $scope.items = Items.index();
    
    //in the real application the resolving is done in a single view
    $scope.resolve = function() {
        Items.resolve(this.index);
    };
});

//the head has to inform the user about the progress
app.controller('head', function($scope, Items) {
    //the real app has getter functions for the length of items
    $scope.resolved = Items.resolved().length;
    $scope.total = Items.index().length;
    
    function numberOfResolvedItems() { return Items.resolved().length }
    
    //dosen't work. or is wrong implemented?!
    $scope.$watch(numberOfResolvedItems, function(items) {
        $scope.resolved = Items.resolved().length;
        $scope.total = Items.index().length;
    }, true);
    
    //something like this works, but is it the best solution?
    //$rootScope.$on('item.resolved', function() { 
    // ...
});