JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app ng-controller="App">
    <ul>
        <li ng-repeat="line in lines" ng-controller="LineController">
            <input type="checkbox" ng-repeat="box in line.boxes" ng-model="box.on" /> <a ng-show="line.boxes.length > 1" ng-click="removeBox()">-</a>
 <a ng-click="addBox()">+</a>

        </li>
    </ul> <a ng-click="addLine()">Add</a>

</div>

JavaScript

var webApp = angular.module('myModule', []);

webApp.controller('App', function ($scope) {
    $scope.lines = [];

    $scope.addLine = function () {

        console.log("addLine");

        $scope.lines.push({
            boxes: []
        });
        

    };
});

webApp.controller('LineController', function ($scope) {
    $scope.addBox = function () {
        var box = {};
       /* Object.defineProperty(box, 'on', {
            enmerable: true,
            get: function () {
                console.log('Get!');
                return this._on;
            },
            set: function (on) {
                this._on = on;
            }
        });*/
        $scope.line.boxes.push(box);
        
       

        $scope.$watch(function () {
            return $scope.line.boxes;
        },
        function (newValue, oldValue) {
            
            if(newValue == oldValue) return;
             console.log('Get new checkbox!');
           
        }, true);

    };

    $scope.removeBox = function () {
        $scope.line.boxes.pop();
    };
});