Ember Understand execution flow between route/controller

I have a "box" route/controller as below;

export default Ember.Controller.extend({
    initialized: false,
    type: 'P',
    status: 'done',
    layouts: null,
    toggleFltr: null,
    gridVals: Ember.computed.alias('model.gridParas'),
    gridParas: Ember.computed('myServerPars', function() {
        this.set('gridVals.serverParas', this.get('myServerPars'));
        this.filterCols();

        if (!this.get('initialized')) {
            this.toggleProperty('initialized');
        } else {
            Ember.run.scheduleOnce('afterRender', this, this.refreshBox);
        }

        return this.get('gridVals');
    }),
    filterCols: function()
    {
        this.set('gridVals.layout', this.get('layouts')[this.get('type')]);
    },
    myServerPars: function() {
        // Code to set serverParas
        return serverParas;
    }.property('type', 'status', 'toggleFltr'),
    refreshBox: function(){
        // Code to trigger refresh grid
    }
});

My route looks like;

export default Ember.Route.extend({
    selectedRows: '',
    selectedCount: 0,
    rawResponse: {},
    model: function() {
        var compObj = {};
        compObj.gridParas = this.get('gridParas');
        return compObj;
    },
    activate: function() {
        var self = this;
        self.layouts = {};

        var someData = {attr1:"I"};
        var promise = this.doPost(someData, '/myService1', false); // Sync request (Is there some way I can make this work using "async")
        promise.then(function(response) {       
            // Code to use response & set self.layouts
            self.controllerFor(self.routeName).set('layouts', self.layouts);
        });
    },
    gridParas: function() {
        var self = this;
        var returnObj = {};
        returnObj.url = '/myService2';
        returnObj.beforeLoadComplete = function(records) {          
            // Code to use response & set records
            return records;
        };
        return returnObj;
    }.property(),   
    actions: {      
    }
});

My template looks like

{{my-grid params=this.gridParas elementId='myGrid'}}

My doPost method looks like below;

doPost: function(postData, requestUrl, isAsync){
    requestUrl = this.getURL(requestUrl);
    isAsync = (isAsync == undefined) ? true : isAsync;
    var promise = new Ember.RSVP.Promise(function(resolve, reject) {
        return $.ajax({
            // settings
        }).success(resolve).error(reject);

    });
    return promise;
  }

Given the above setup, I wanted to understand the flow/sequence of execution (i.e. for the different hooks). I was trying to debug and it kept hopping from one class to another. Also, 2 specific questions;

1. I was expecting the "activate" hook to be fired initially, but found out that is not the case. It first executes the "gridParas" hook i.e. before the "activate" hook. Is it because of "gridParas" specified in the template ?

2. When I do this.doPost() for /myService1, it has to be a "sync" request, else the flow of execution changes and I get an error. Actually I want the code inside filterCols() controller i.e. this.set('gridVals.layout', this.get('layouts')[this.get('type')]) to be executed only after the response has been received from /myService1. However, as of now, I have to use a "sync" request to do that, otherwise with "async", the execution moves to filterCols() and since I do not have the response yet, it throws an error.

Just to add, I am using Ember v 2.0