Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div style="width: 100%; height: 600px;" ng-controller="myCtrl" >
    <p style="color: blue;" ng-repeat="el in foo" ng-click="addFoo()">{{el}}</p>
    <button ng-click="remove()">delete</button>
    <p style="color: red;" ng-repeat="el in bar" ng-click="addBar()">{{el}}</p>
</div>

JavaScript

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

Parent = function() {
    return {
        array: [],

        add: function(element) {
            this.array.push(element + this.array.length.toString());
            return this;
        },

        getAll: function() {
            return this.array;
        }
    };
};

Child = Object.create(Parent(), {
    removeAllButOne: { value: function() {
        this.array.splice(1);
        return this;
    }}
});
    
    foo = Object.create(Parent());
    foo.add('foo');
    
    bar = Object.create(Child);
    bar.add('bar');

myApp.controller('myCtrl', function ($scope) {
    $scope.foo = foo.getAll();
	$scope.bar = bar.getAll();
    
	$scope.addFoo = function() {
        foo.add('foo');
    };
	
	$scope.addBar = function() {
        bar.add('bar');
    };
	
	$scope.remove = function() {
		bar.removeAllButOne();
	};
});