Specific canjs route isn't called on page load with hashtag

What is wrong in the code? expected results: when the page loads like url/case#!open-cases or url/cases#!new then the target route listner('new route' or ':filter-cases route') should be called but it doesn't happen

PageControl = can.Control({
        init : function(el, options) {
            debugger;
        },
        'new route': function() {debugger;},
        ':filter-cases route': function() {debugger;
            new CaseList('#content');
        },
        'route': function(data) {debugger;
            new CaseList('#content');
        }
    });

    $(document).ready(function() {
        //initDialog();
        can.route(':filter-cases');
        can.route('case/:id');
        can.route('new');
        //can.route('', {filter: 'open' })
        can.route.ready();

        new PageControl(window);
    });

It should work if you call can.route.ready() after initializing the page control:

$(document).ready(function() {
    //initDialog();
    can.route(':filter-cases');
    can.route('case/:id');
    can.route('new');
    //can.route('', {filter: 'open' })

    new PageControl(window);
    can.route.ready();
});