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',[]);

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

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

foo = Parent();
foo.add('foo');

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