title: Show loading overlay until $http get images are loaded
body: <p>I want to show a loading animation (ideally that shows % of how much is loaded) whilst content loads from my $http get.</p>
  
  <p>I have made an attempt, but it does not seem to hide the content I am trying to hide. </p>
  
  <p>I set a time length- but I do not want it to show the loading overlay for a set time. I want it to show the loading overlay (possibly until a minimum of 3 images are loaded?) until the element is loaded.</p>
  
  <p>Here is my attempt in a plunker:
  <a href="http://plnkr.co/edit/7ScnGyy2eAmGwcJ7XZ2Z?p=preview" rel="nofollow">http://plnkr.co/edit/7ScnGyy2eAmGwcJ7XZ2Z?p=preview</a>     </p>
  
  <pre><code> .factory('cardsApi', ['$http', '$ionicLoading', '$timeout', function ($http, $ionicLoading, $timeout) {
          var apiUrl = 'http://mypage.com/1/';
  
          $ionicLoading.show({
              duration: 3000,
              noBackdrop: true,
              template: '&lt;p class="item-icon-left"&gt;Loading stuff...&lt;ion-spinner icon="lines"/&gt;&lt;/p&gt;'
          });
  
  
          var getApiData = function () {
              return $http.get(apiUrl).then($ionicLoading.hide, $ionicLoading.hide);
          };
  
          return {
              getApiData: getApiData,
          };
      }])
  
      .controller('CardsCtrl', ['$scope', 'TDCardDelegate', 'cardsApi', '$http',
          function ($scope, TDCardDelegate, cardsApi, $http) {
  
              $scope.cards = [];
  
                  cardsApi.getApiData()
                      .then(function (result) {
                          console.log(result.data) //Shows log of API incoming
                          $scope.cards = result.data;
                          $scope.product_id = result.data.product_id;
                      })
                      .catch(function (err) {
                          //$log.error(err);
                      })
  </code></pre>