How to load data synchronously in AngularJS application

If you want the session data to be loaded prior to a controller being loaded, you should included it as as resolve parameter (assuming you are using the $routeProvider).

For example:

angular.module('mymodule', ['ngResource'])

  /* here's our session resource.  we can call Session.get() to retrieve it. */
  .factory('Session', ['$resource', function($resource) {
     return $resource('/api/session.json');
   }])

  /* here's our controller + route definition. */
  .config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/foo', {
      controller: 'MyCtrl',
      templateUrl: '/templates/foo.html',

      /* the controller will not be loaded until the items
       * below are all resolved! */
      resolve: {
        session: ['$q', 'Session', function($q, Session) {
          var d = $q.defer();
          Session.get(function(session) {
            /* session returned successfully */
            d.resolve(session);
          }, function(err) {
            /* session failed to load */
            d.reject(err);
          });
          return d.promise;
        }]
      }
    });
  }])

  .controller('MyCtrl', ['$scope', 'session', function($scope, session) {
    /* 'session' here is the key we passed to resolve above.
     * It will already be loaded and resolved before this function is called */
    $scope.session = session;
  }]);

Angular is hardcoded to make the requests async. To do it synchronously would take other code, whether custom or from some other library. Here is line 9269 from angular 1.0.7:

xhr.open(method, url, true);

The third param makes it asynchronous.

I would take a step back and think about how you are doing things. You could provide some loading indicator while your async request is going and easily control the loading of a view in the success callback so that it doesn't appear until the data is loaded.

A better solution is to add a response interceptor:

checkAuth = ($q, $location) ->
  success = (response) ->
    response
  error = (response) ->
    errorCode = response.status
    $location.path '/login' if errorCode is 403 or errorCode is 401
    # $q.reject response - no need because we are redirecting before any other promises in the chain will resolve (were breaking our future promises)

  (promise) ->
    promise.then success, error

$httpProvider.responseInterceptors.push checkAuth

And in your $routeProvider, or $stateProvider in my case:

.state 'user',
  templateUrl: 'assets/views/user/partials/user.html'
  resolve:
    credentials: (checkLogIn) ->
      checkLogIn.get().$promise

When checkLogIn.get()'s promise is rejected (the error handler is fired), assuming it's a 401 or 403 response (unauthenticated or unauthorized), the promise chain will be broken and the user will be "redirected" to /login.

With this method, any error calls will be channelled into the interceptor, instead of handling errors on a route-by-route basis.