<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'nga',country:'Denmark'},
{name:'hadireza',country:'USA'},
{name:'mani',country:'German'},
{name:'koijan',country:'Norway'},
{name:'fiti',country:'Iran'},
{name:'joonia',country:'Iraq'},
{name:'fankobi',country:'Denmark'}]">

<p>Looping with objects:</p>
<table>
  <tr ng-repeat="x in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.name }}</td>
    <td ng-if="$even">{{ x.name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.country }}</td>
    <td ng-if="$even">{{ x.country }}</td>
  </tr>
</table>


</div>

</body>
table, td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.