AngularJS prevent template from rendering based on response from an API

Do you have to use ngRoute? ui-router has two excellent tools that you could use either separately or together to solve this:

1. It has a $stateChangeStart event that gets fired before a state transition occurs, with all information about the previous/next states. You can stop state transitions here. For example, I use something like this to send auth-required accesses to a login experience:

   $stateProvider.state('auth-required-state', {
       url: '^/auth-required-state',
       templateUrl: '/views/view/auth-required-state.html',
       controller: 'AuthRequiredStateController',
   
       // NOTE: You have access to this entire block in $stateChangeStart, so you can
       // define your own attributes that your own code looks at
       allowAnonymous: false
   });
   

   and in $stateChangeStart:

   // Handle some checking that needs to be performed
   $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
       // If we aren't logged in and we need to be, do that
       if (!$rootScope.currentUser.loggedIn && !toState.allowAnonymous) {
           $state.go('login');
           e.preventDefault();
       }
   });
   

2. It has a resolve operator that you can use to lazy-load things like if you need a data block from a REST service, not just a template. For another use-case I had, I only wanted to go to the target screen if the user had access to that data - the template was always available because you could access some records but not others. You can do something like this:

   var ShowDataControllerConfig = function($stateProvider) {
       var getDataBlock = function($stateParams, myDataManager) {
           return myDataManager.getDataBlockAndReturnAPromise($stateParams.data_id);
       };
   
       // Tolerate minification - you can't use the array trick in state definitions
       getGroupEntry.$inject = ['$stateParams', 'myDataManager'];
   
       $stateProvider.state('show-data', {
           url: '^/show-data/{data_id}',
           templateUrl: '/views/view/show-data.html',
           controller: 'ShowDataRoomController',
           resolve: {
               dataBlock: getDataBlock
           }
       });
   };
   
   ShowDataControllerConfig.$inject = ['$stateProvider'];
   
   var ShowDataController = function(dataBlock) {
       // dataBlock contains our data - but unlike ngRoute, we never even get here if
       // it couldn't be loaded. You can do error handling in $stateChangeError.
   };
   
   ShowDataController.$inject = ['dataBlock'];
   
   angular
       .module('myApp.controllers.showData', [])
       .config(ShowDataControllerConfig)
       .controller('ShowDataController', ShowDataController);