Pulling Shopify data with angularjs

So i’ve been using a test file to try and pull Shopify data from the store. What I THINK is the problem, is that the api is making the request to fetch the data, but it takes longer to fetch the data than to run through my script. So the variable gets set to null. I’m assuming I need a way to check if the promise is successful and/or write the data to a JSON file. Anyway, here’s the code. The page shows up blank when you run it.

App.js

 phonecatApp.controller('PhoneListController', function 
 PhoneListController($scope) {
    var products_complete;
    var products = [];


    //init the client
    const client = window.ShopifyBuy.buildClient({
        domain: 'some-site.myshopify.com',
        storefrontAccessToken: 'xxxxxxxxxxxx'
    });

$scope.getShop = function () {
    //get the complete product listings from shopify
    client.product.fetchAll().then((raw_products) => {
        products_complete = raw_products;
        reduce_products();
        $scope.products = $scope.setProductValue();
    });
    //reduce the products list down to necessary information
    function reduce_products() {
        for (var i in products_complete) {
            var product_tmp = products_complete[i];
            var product = {};
            //add name and tags
            product['title'] = product_tmp['title'];
            product['tags'] = product_tmp['tags'];
            product['type'] = product_tmp['productType'];
            product['pic_urls'] = [];
            //add the images 
            for (var j in product_tmp['images']) {
                if (product_tmp['images'][j]['src'] != null) {
                    product['pic_urls'].push(product_tmp['images'][j]['src']);
                }
            }
            product['vars'] = []
            for (var k in product_tmp['variants']) {
                var w = product_tmp['variants'][k]['weight'];
                var p = product_tmp['variants'][k]['price'];
                var a = product_tmp['variants'][k]['available'];
                if (!((typeof w == 'undefined') && (typeof p == 'undefined') && (typeof a == 'undefined'))) {
                    product['vars'].push({
                        'weight': w,
                        'price': p,
                        'available': a
                    });
                }
            }
            //add the current product to the final list
            if (('title' in product) && ('tags' in product) &&
                (product['pic_urls'].length != 0) && 
(product['vars'].length != 0)) {
                products.push(product);
            }
        }



    }


     return products;
}

index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">

     <head>
     <meta charset="utf-8">
     <title>Google Phone Gallery</title>
     <link rel="stylesheet" 
  href="bower_components/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="app.css" />
     <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>

<script src="https://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</head>

 <body ng-controller="PhoneListController" ng-cloak>

     <ul>
         <li ng-repeat="product in products">

        <p>{{product.title}}</p>
        </li>
    </ul>

 </body>


</html>

Source: AngularJS