<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 | orderBy : 'country'">
    <td>{{ x.name }}</td>
    <td>{{ x.country | uppercase  }}</td>
  </tr>
</table>


</div>

</body>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd)	{
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.