$ Http.get recursivo para loop

Eu uso Angular 1.5. Eu tenho uma função que consulta categorias e, para cada categoria, consulta produtos. Quero mostrar uma mensagem depois que todos os produtos forem recuperados, quantos foram recuperados. Emite 0. Qual é a solução?

function getProducts() {
  vm.categories = [];
  var prodcount = 0;

  $http.get("localhost/menu/1/categories")
    .then(function(response) {
      var categories = response.data;
      angular.forEach(categories, function(cat) {
        $http.get("localhost/category/" + cat.id + "/products")
          .then(function(response) {
            cat.products = response.data;
            vm.categories.push(cat);
            prodcount += cat.products.length;
          });
      });
      $mdToast.show($mdToast.simple().textContent("retrieved " + vm.categories.length + " categories and, " + prodcount + " products!."));
    });
}

questionAnswers(2)

yourAnswerToTheQuestion