加载后，调用页面函数但不在AngularJs的HTMLview中显示数组数据？

Question

我创建了一个购物网站AngularJs，我们必须从Firebase数据库中获取产品列表。

//Used for iterate the key and value
function objToArray(batchesObj) {
     var arr = [];
     for (var prop in batchesObj) {
        if(!batchesObj[prop].isDeleted) {
           //Adding key in object
           batchesObj[prop].key = prop;
           arr.push(batchesObj[prop]);
          }
         }
     return arr;
 }



$scope.productDto  =[];

$scope.getProductData = function() {
 //USED FOR CREAT THE FIREABSE REF ANS GET LIMITED DATA...
var ref= firebase.database().ref("sellerProduct").on('value', function(snapshot) {
    var value = snapshot.val();
    $scope.productDto = objToArray(value);
});
}
$scope.getProductData();

<div class="productInfo  w3-col m3  w3-card-4 w3-margin-left" 
    ng-repeat ="list in productArray  | orderBy: getUpdateDate : true">
</div>

产品列表已正确获取，但最初未在视图部分中显示。我不明白我犯了什么错误。如何解决这个问题？