AngularJs sort by nested objects?

Question

Angular

Good day to all.
Let's say we have an array of data like this:

$scope.items = [  
{ name :  'Name1',  phone : { type : 'mob', number : '1234' } },  
{ name :  'Name2',  phone:  { type : 'mob', number : '545234' } } ];

Well, on the view, I display them like this

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th><a href="" ng-click="reverse=!reverse;order('name', reverse)">Name</a></th>
            <th><a href="" ng-click="reverse=!reverse;order('????', reverse)">Phone</a></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items" class="gradeX">
            <td>
               {{ item.name }}  
            </td>
            <td>
              {{ item.phone.type }} : {{ item.phone.number }}

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

Actually sorting is done when you click on the title

<a href="" ng-click="reverse=!reverse;order('name', reverse)">Name</a>

and in the controller this code

var orderBy = $filter('orderBy');

      $scope.order = function(predicate, reverse) {
          $scope.items = orderBy($scope.items, predicate, reverse);
      };

So when I just sort by name
reverse=!reverse;order('name', reverse)
Everything works. But how to sort out by phone (by number) .. ???
probyval so
reverse=!reverse;order('phone.number', reverse)
But it does not sort normally ... ((

Answer 1

Try this. In HTML:
And in the title
I checked it on the fiddle. It seems to work.
jsfiddle.net/Serhioromano/hrg0k5es/2

Answer 2

Maybe not sure, need to use a function to sort.
In place of predicate