AngularJS Loading Example

Show a loading message before your data has been retrieved.

HTML

<div class="container" ng-app="myApp" ng-controller="AppCtrl as ctrl">

  <div ng-if="ctrl.loading">
    Loading...
  </div>

  <div ng-if="ctrl.info">
    {{ ctrl.info }}
  </div>

</div>

JavaScript

angular
  .module('myApp', [])
  .controller('AppCtrl', AppCtrl)
  .service('Service', Service);

function AppCtrl(Service, $timeout) {
  var vm = this;

  vm.info = null;
  vm.loading = true;

  Service.getInfo().then(function(response) {
    $timeout(function() {
      vm.loading = false;
      vm.info = response.data;
    }, 2000);

  });
}

function Service($http) {
  var service = {
    getInfo: getInfo
  };

  return service;

  function getInfo() {
    return $http.get('//api.zippopotam.us/us/90210');
  }
}