Select websql Data using Angular JS

I am trying to figure this out the best way to do this. I am trying to insert data into a WebSQL table and then select the data from the table and display on the screen using ng-repeat. I am using this Angular WebSQL Module https://github.com/paulocaldeira17/angular-websql#select-all. So far, I can get the remote data and insert them into the local database. When I try to call the insert data, $scope.localproducts shows an empty array - console.log( $scope.localproducts) shows an empty array. I use localproducts scope for my ng-repeat.

I can't get to return the ProductsFactory.localproducts array to my controller from the Factory's selectAllData function.

When clicks a button on my page, it calls the insertData function in my Controller.

What have I done wrong here? I am pretty new to angular so I would very much appreciate if someone can help me to improve the below code or suggest if there is a better way to do this.

.controller('DownloadProductsCtrl', ['$scope','ProductsFactory', function ($scope, ProductsFactory){
    $scope.products = ProductsFactory.products;
    $scope.localproducts = ProductsFactory.localproducts;

    $scope.insertData = function(){
        ProductsFactory.getRemoteData().then(function(results){
            $scope.localproducts = ProductsFactory.localproducts;
            console.log( $scope.localproducts); //This shows an empty array
        });
    }; }])

.factory('ProductsFactory', ['$webSql', function($webSql){
    db = $webSql.openDatabase('myappdb', '1.0', 'Test DB', 2 * 1024 * 1024);
    ProductsFactory = {};
    ProductsFactory.products = [];
    ProductsFactory.localproducts = [];

    ProductsFactory.getRemoteData = function () {
        return $http.get('./products/list.json')
        .success(function (data) {
            ProductsFactory.products = data;
            ProductsFactory.insertData(data);
        })
        .error(function () {
            console.error('Error');
        });
    };

    ProductsFactory.insertData = function (data){
        angular.forEach(data, function(value, key) {
            db.insert('products', value).then(function(results) {
                <!-- In here I like to count the total inserted items and display it on the page, but not sure sure how to send it to a scope in my controller -->
            });     
        });
        ProductsFactory.selectAllData();
    };

    ProductsFactory.selectAllData = function(){

        db.selectAll("products").then(function(results) {
          for(var i=0; i < results.rows.length; i++){
             ProductsFactory.localproducts.push(results.rows.item(i)); //This added data to the array successfully.
          }
          console.log(ProductsFactory.localproducts); //This shows an empty array
        });
    };

    return ProductsFactory;

}]);