How to get http request request in factory before running the rest of angular code

In my factory, I have a get request that receives data that is vital to the rest of my application. I am currently using the app.run () function to run my factory when the app is initialized, but the HTTP request takes longer than the rest of the code. If I navigate to "/ home" and initialize the app and then go to "/ map" it works fine, however if I just go to "/ map" and its initialization won't work because the data from the get request do not load until the page. Does anyone know how I can ensure that my HTTP request is fully started before moving on to the controller and the rest of the program?

Doing some research it seems like the angular way is to use promises. However, I don't know how the promise to start the factory / hold up the controller could be used, or if that is possible. Therefore, if you have any thoughts on this or links to the documentation, it will be appreciated.

my module declaration

angular.module('Ski', [
  'ngRoute'
]).run(function(MountainFactory, $q){
  MountainFactory.fetch();
});

      

        
        
        
      

    

factory where http request is

angular.module('Ski').factory('MountainFactory', function($http, $q) {
  var mountain = {};
  var fetch = function() {
     $http.get('https://quiet-journey-8066.herokuapp.com/mountains/3')
        .success(function(response) {
            angular.copy(response, mountain);
          });
  };
  return {
    fetch: fetch,
    mountain: mountain
  };
});

      

        
        
        
      

    

where I am setting the area.

angular.module('Ski').controller('MapCtrl', function($scope, $http, MountainFactory) {
  'use strict';
  $scope.mountain = MountainFactory.mountain;
});

      

        
        
        
      

    

my directive where i set my map with data from get request. I have not included this code in its long and distracting, but if an HTTP data request is triggered and the scope is set, this directive works fine, so I did not include it.

angular.module('Ski').directive('mapCanvas', function() {

  function link (scope, element, attrs) {
      //code here where I make a map.

    }
    return {

      scope: {
        lat: '@',
        lng: '@',
        map: '@map'
      },

      link: link,

    };
  });

      

        
        
        
      

    

map.html -> route '/ map'

<div ng-controller="MapCtrl">
  <h1>{{mountain.name}}</h1>
   <div map-canvas lat="{{lat}}" lng="{{lng}}" id="map-canvas" style="width: 500px; height: 500px;"></div>
  <div ng-controller="MarkerCtrl">
    <a ng-click="makeMarker()"> New Marker </a>
    <button ng-click="makeMarker()"type="button" class="btn btn-primary">Create</button>
  </div>
</div>