Wait until scope variable is loaded before using it in the view in angular.js

You ask:

How can I wait for allPermissions to be loaded before the view renders?

To prevent the entire view from rendering, you must use resolve. You don’t have to use the promise library though, since $http returns a promise:

var app = angular.module('app');

app.config(function ($routeProvider) { 
  $routeProvider
    .when("https://stackoverflow.com/", {
        templateUrl : 'template.html',
        controller : 'MyCtrl',
        resolve : MyCtrl.resolve
  });
});

function MyCtrl ($scope, myHttpResponse) {
   // controller logic
}

MyCtrl.resolve = {
  myHttpResponse : function($http) {
    return $http({
        method: 'GET',
        url: 'http://example.com'
    })
    .success(function(data, status) {
        // Probably no need to do anything here.
    })
    .error(function(data, status){
        // Maybe add an error message to a service here.
        // In this case your $http promise was rejected automatically and the view won't render.
    });
  }
}

But if you simply want to hide the dashboard <li>, then do as Joe Gauterin suggested. Here’s a very simple example plunkr if you need it.