title: Using $http after previous $http done
body: <p>I have 3 JSON web services which I should use in my application,
  I use <code>$http</code> to load from URL, my code is :</p>
  
  <pre><code>$http.get('http://{url}/users')
      .then(function (result) {
          storeUsers(result);
      });
  
  $http.get('http://{url}/news')
      .then(function (result) {
          storeNews(result);
      });
  
  $http.get('http://{url}/pages')
      .then(function (result) {
          storePages(result);
      });
  
  var users = getUsers();
  </code></pre>
  
  <p>Problems :</p>
  
  <p>1- all <code>$http</code> run together not wait until the previuse <code>$http</code> done.</p>
  
  <p>2- <code>var users = getUsers();</code> will run before <code>$http</code> done.</p>
  
  <p><strong>UPDATE :</strong>
  I changed my code to :</p>
  
  <pre><code> var loadedService = {
              users: false,
              news: false,
              pages: false
          };
  
  function getUsers() {
              deferred = $q.defer();
              $http.get('http://{url}/users')
                  .then(function (result) {
                      loadedService.users = result;
                      deferred.resolve('I got users');
                      console.log("Get users");
                  });
              return deferred.promise;
          }
  
  function getNews() {
              deferred = $q.defer();
              $http.get('http://{url}/news')
                  .then(function (result) {
                      loadedService.news = result;
                      deferred.resolve('I got news');
                      console.log("Get news");
                  });
              return deferred.promise;
          }
  
  function getPages() {
              deferred = $q.defer();
              $http.get('http://{url}/pages')
                  .then(function (result) {
                      loadedService.pages = result;
                      deferred.resolve('I got pages');
                      console.log("Get pages");
                  });
              return deferred.promise;
          }
  
  
  getNews().then(getUsers()).then(getPages()).then(function () {
       console.log('Done !');
  });
  </code></pre>
  
  <p>When I run my program, I will see :</p>
  
  <pre><code>XHR finished loading: GET "http://{url}/pages". ionic.bundle.js:16185
  Get pages sync.js:133
  XHR finished loading: GET "http://{url}/users". ionic.bundle.js:16185
  Get users sync.js:56
  XHR finished loading: GET "http://{url}/news". ionic.bundle.js:16185
  Get news sync.js:107
  </code></pre>
  
  <p>as you can see, first of all <code>pages</code> service loaded, then <code>users</code> service and then <code>news</code>, while in my code I said <code>getNews().then(getUsers()).then(getPages())</code>.</p>
  
  <p>and finally <code>console.log('Done !');</code> don't show !</p>