orderBy not working for nested array in angular js

Question

In the following case orderBy filter is not working for point property and name. i don't know why? here is my example on fiddle.

Template:

<div ng-controller="AppCtrl">
    <table>
        <tr>
            <th style="width:100px;" ng-click="pred='name'">name</th>
            <th style="width:100px;">id</th>
            <th style="width:100px;" ng-click="pred='points'">point</th>
        </tr>
        <tbody ng-repeat="user in ranking | orderBy:pred">
        <tr ng-repeat="tab in user.tabs | orderBy:pred">
            <td style="width:100px;">{{user.name}}</td>
            <td style="width:100px;">{{tab.tabId}}</td>
            <td style="width:100px;">{{tab.points}}</td>
        </tr>
        </tbody>
    </table> 
</div>

Controller:

var app = angular.module('app', []);

function AppCtrl($scope) {
    $scope.currentTab = 1
    $scope.ranking = [
        {
            'uId': 2,
            'name': 'Jeremy',
            'tabs': [
                {
                    'tabId': 1,
                    'points': 100,
                }, 
                {
                    'tabId': 2,
                    'points': 10
                }
            ],
        },
        {
            'uId': 3,
            'name': 'Jordon',
            'tabs': [
                {
                    'tabId': 1,
                    'points': 180,
                },
                {
                    'tabId': 2,
                    'points': 5
                }
            ],
        }
    ]
}