Switching columns and rows with ng-repeat - html

Question

I am trying to make a series of rows based off of an array of objects. i am trying to produce a series of columns displaying each property of the objects (each has the same properties), with rows showing the property values.
I am currently using the following code.
<div ng-controller="HomepageController" >
<!-- form holding the name -->
<form td-ui-grid-row ng-controller="HomepageController"
ng-submit="vm.addData()" class="form-inline party-form" ng-repeat="dataEntry in vm.dataList">
<div td-ui-grid-col="3xs" ng-repeat="dataContent in dataEntry">
dataContent:{{dataContent}}
</div>
</form>
</div>
vm.data is the following series of data: [{"name":"davis","phone":"11111111111"},{"name":"graeham","phone":"222222222222"},{"name":"eric","phone":"33333333333"}]
and i want to produce the table of vales to look like:
davis graeham eric
11111111111 222222222222 33333333333
however, I am getting the inverse:
davis 11111111111
graeham 222222222222
eric 33333333333
I simplified the code so that it is easier to look and work with:
<div ng-controller="HomepageController" >
<!-- form holding the name -->
<form td-ui-grid-row ng-controller="HomepageController" ng-submit="vm.addData()" class="form-inline party-form">
<table>
<tr>
<td ng-repeat="person in vm.dataList">
<input ng-model="vm.newData.name" type="text" class="form-control" placeholder="{{person.name}}" required>
</td>
</tr>
<tr>
<td ng-repeat="person in vm.dataList">
<input ng-model="vm.newData.name" type="text" class="form-control" placeholder="{{person.phone}}" required>
</td>
</tr>
</table>
</form>
</div>
This code is now showing the proper output format, however i need to be able to cycle through any number of object attributes
.directive('tdUiGridRow', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.addClass('td-row');
if (attrs.tdUiGridRow) {
element.addClass('td-row-type-'+attrs.tdUiGridRow);
}
}
};
})

Answer 1

Please do below. You would create two loops, one for name and one for phone.
<div><span ng-repeat="contact in vm.data">{{contact.name}}</span></div>
<div><span ng-repeat="contact in vm.data">{{contact.phone}}</span></div>

Answer 2

This simply requires looping through the data multiple times, and extracting one property each time.
<table>
<tr>
<td ng-repeat="person in data">{{person.name}}</td>
</tr>
<tr>
<td ng-repeat="person in data">{{person.phone}}</td>
</tr>
</table>
http://plnkr.co/edit/tXmaTmPuwbsN62cQLJuF?p=preview