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 = Object.create({
    add: function(element) {
        this.array.push(element + this.array.length.toString());
        return this;
    },

    getAll: function() {
        return this.array;
    }
}, {
    ctor: { value: function(someArgs) {
        this.array = [];
        // maybe use someArgs
        return this;
    }}
});

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

foo = Object.create(Parent).ctor();
foo.add('foo');

bar = Object.create(Child).ctor();
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();
	};
});