In my opinion, using arrays is a better option.
To prepend the list generated by ng-repeat, you can use the unshift() method.
var data = [bar, bar2, bar3];
data.unshift(newItem);
//data = [newItem, bar, bar2, bar3];
Before proceeding with this approach, ensure that you have successfully populated the database using $http.
Although you mentioned considering pushing, it will add the new data to the end of the list in the view.
Hopefully, this explanation assists you :)
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.items = [{
name: '1',
type: 'A'
}, {
name: '2',
type: 'B'
}];
$scope.prependItem = function () {
$scope.items.unshift({
name: '3',
type: 'C'
});
};
}]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="//code.angularjs.org/1.2.6/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.6/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items" watch-scope="item">
<div class="someClass">Item name: {{item.name}}</div>
<div class="anotherClass">Item type: {{item.type}}</div>
</div>
<button ng-click="prependItem()">Add New</button>
</body>
</html>