how to get a http request run in a factory before running rest of code angular

Question

In my factory I have a get request that gets data that is vital to the rest of my app. I am currently using a app.run() function to run my factory when the app is initialized but the http request is taking longer than the rest of the code. If I navigate '/home' and initialize the app and then navigate to '/map' it works perfectly, however if I just navigate to '/map' and initialize it will not work because the data from the get request is not loaded before the page. Does anyone know how I can ensure that my http request is fully run before moving on to the controller and the rest of the program?

Doing some research it seems as though the angular way is to use promises. However, I do not know how one would use a promise to run a factory/ delay a controller or if its even possible. So if you have any thoughts on this or links to documentation it would be appreciated.

my module declaration

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

factory where the 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
  };
});

controller where I set the scope.

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

my directive where i set up my map with data from the get request. I did not include this code as its long and distracting, but if the data http request is run and the scope is set this directive works fine, which is why 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 --> the route of '/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>

Answer 1

Here I have an app.js where I register my modules... So I can set my controllers like this:

.state('app.registro', {
      url: "/registro",
      views: {
        'menuContent' :{
          templateUrl: "templates/registro.html",
          controller: 'RegistroCtrl'
            //resolve: {
            //    cordova: function($q) {
            //    var deferred = $q.defer();
            //    ionic.Platform.ready(function() {
            //        console.log('ionic.Platform.ready');
            //        deferred.resolve();
            //    });
            //    return deferred.promise;
            //    }
            //}
        }
      }
    })

The commented block is where you would make your request. Making this, controller waits for the request...