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 = {
	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();
	};
});