How do I set Angular http calls in my case

Question

I am trying to setup a service to set the http request data. I need to set the data in one controller and obtain the data in the another controller when that page is loaded I have something like

angular.module('myApp').service('testService', ['Product','$q',
    function(Product, $q) {
        var products, targetProduct;
        var deferred = $q.defer();

        Product.query({
            Id: 123
            }, function(products) {
                targetProduct = products[0];
                deferred.resolve(products);
        })

        var getTargetProduct = function() {
            var deferredtwo = $q.defer();

            // return deferredtwo.promise;
            deferred.promise.then(function(){
                deferredtwo.resolve(targetProduct);
            })
            return deferredtwo.promise;
        }

        var setTargetProduct = function(targetProduct) {
                targetProduct = targetProduct
        }

        return {
            setTargetProduct: setTargetProduct,
            getTargetProduct: getTargetProduct,
            productPromise : deferred.promise
        };
    }
]);

nav controller

  testService.productPromise.then(function(products, $rootscope){
      $scope.products= products;
      $scope.targetProduct = products[0];
   })

  //when user click the project  ng-click = setTargetProduct(product);
  $scope.setTargetProduct = function(targetProduct) {
      $rootscope.$broadcast('newProduct' targetProduct);
      testService.setTargetProduct(targetProduct)
   }

product detail controller

 testService.getTargetProduct().then(function(targetProduct) {
       $scope.$on('newProduct', function(newProduct){
          console.log(newProduct) <---works if both controllers are loaded but undefined if user is not in the product detail page.
       })  
       $scope.targetProduct = targetProduct; 
  })

However, if product details controller hasn't been loaded (user is in different page) when user clicks setTargetProduct , The newProduct is undefined because the $scope.$on is not loaded and can't detect the broadcast. Is there anyway to fix this? Thanks so much!

Answer 1

You should put your loadTargetProduct inside your $on callback and if your newProduct is not loaded, use getTargetProduct to load it.

   $scope.$on('newProduct', function(newProduct){
      if (!(newProduct)){
          //if newProduct is not laoded, load it. 
          testService.getTargetProduct().then(function(targetProduct) {

             $scope.targetProduct = targetProduct; 
          })
       }
   })