NG Sort multilevel object

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<div ng-app="MyApp" class="container" ng-controller="MyCtrl">
    <br>
    <table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th><a href="" ng-click="reverse = !reverse; predicate = 'name'">Name</a></th>
            <th>
                <a href="" ng-click="reverse = !reverse; predicate = 'phone.type'">Type</a>
                <a href="" ng-click="reverse = !reverse; predicate = 'phone.number'">Num</a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items | orderBy:predicate:reverse" class="gradeX">
            <td>
               {{ item.name }}  
            </td>
            <td>
              {{ item.phone.type }} : {{ item.phone.number }}

            </td>
        </tr>
       </tbody>
</table>
</div>

JavaScript

var app = angular.module('MyApp', [])
.controller('MyCtrl', function($scope) {
    $scope.items = [  
        { name :  'Name1',  phone : { type : 'mob', number : '1234' } },
        { name :  'Name1',  phone : { type : 'mob', number : '12345' } },
        { name :  'Name2',  phone:  { type : 'mob', number : '545234' } },
        { name :  'Name3',  phone : { type : 'home', number : '254' } }
    ];
});