Angularjs datatables rendering before data is fetched

angular.module('SomeApp').controller('userListsCtrl',userListsCtrl);

function userListsCtrl(DTOptionsBuilder,DTColumnBuilder,$http,$q) {
    var vm = this;
    function serverData() {
        var defer = $q.defer();
        $.ajax({
            'dataType': 'json',
            'type': 'POST',
            'contentType': 'application/json',
            'url': 'cgi/userNavLists.py',
            'data': JSON.stringify({'request':"INPROCESS"}),
            'success': function(data, textStatus, jqXHR, fnCallback){
                console.log("User Table Data Coming Up");
                console.log(data);
                defer.resolve(data);
            },

        });

        return defer.promise;
    }

   serverData().then(function(data){
        console.log("Promise Data");
        console.log(data);
   });
    vm.dtOptions = DTOptionsBuilder.fromSource('cgi/userNavLists.py').withFnServerData(serverData);
                console.log("User Table Data Coming Up123");
    console.log(vm.dtOptions);
    vm.dtColumns = [
        DTColumnBuilder.newColumn('requestId').withTitle('ID'),
        DTColumnBuilder.newColumn('requestType').withTitle('Type'),
        DTColumnBuilder.newColumn('identifier').withTitle('Identifier'),
        DTColumnBuilder.newColumn('domainName').withTitle('Domain Name'),
        DTColumnBuilder.newColumn('recordType').withTitle('Record Type'),
        DTColumnBuilder.newColumn('state').withTitle('State'),
    ];


}

I am trying to render table fetching data from server. But my table is getting render before data is being fetched.I used promise to do the job but seems it ain't fulfilling my problem. Is their a way I can make it work???