Angular Route resolving with async service

I've been using Angular for a few weeks now and I love it for the most part. I'm now in the process of improving my code (which already works, but not as efficiently as it should).

Basic idea:

• basic web-app template (like a fixed header menu) with options to jump to different parts of the web-app (read: different views+controllers set-up in routes) - Got it, that works :)
• each view(+controller) has a security aspect, not everybody should be able to go to every view.

So, the security aspect seemed logical to implement as an Angular Service. The Singleton patte seems a perfect fit (below is simplified from what I have now).

app.service("Security", [ "$http", function($http) {
   this.userId        = "";
   this.viewWhiteList = [];

   this.checkWhiteList = function(view) {
      retu <this.userId initialised AND view in this.viewWhiteList>
   };

   $http.get(...).then(function(response){
      this.userId        = response.data.userId;
      this.viewWhiteList = response.data.viewWhiteList;
   });
}]);

A simplified router for this app would look like:

app.config(function($routeProvider){
$routeProvider
    .when("/admin", {
        templateUrl:  "views/admin.html",
        controller:   "AdminCtrl",
        controllerAs: "admin"
    })
    .when("...", { ... })
});

My current solution "works" because I don't show the view when this is not allowed. But the controller will get executed by the router.

<section id="section" class="content" ng-show="main.checkWhiteList('admin')">
   <h3>Admin</h3>
   ...
</section>

Question

I tried the resolve+promise approach (in the Security service) and I see how that works on delaying the loading of the view+controller, but I simply don't see how to get it to avoid loading (and redirect to /error in case the white-list check retus false).

What am I missing conceptually?