Function call in HTML before promise finished (angular way)

I have the following controller. The function getYearAgoDifference is quite problematic.

  $scope.getYearAgoDifference = function(data) {
    var weeklyData = data.series[0].data;
    if(weeklyData.length < 52) {
      return "-";
    } else {
      return weeklyData[0] - weeklyData[52];
    }
  };

  // Fetching methods

  var fetchDieselDataUS = function() {
    Diesel.fetchDataUS()
      .then(function(data) {
        $scope.dataUS = data;
      }, function(error) {
        console.log('Error resolving data');
      });
    console.log('Loading diesel data complete');
  };

  fetchDieselDataUS();

My HTML is as follows:

 <td>{{ getYearAgoDifference(dataUS) }}</td>

As you can see this is problematic, the function gets called before $scope.dataUS is finished loading. What would be an appropriate way to tackle this issue?

I have a solution which is quite cumbersome and heavy, when $scope.dataUS gets loaded after the successful promise, create a parallel array with the data I need by calling the problematic function. This doesn't feel right or efficient at all.

I also tried by using a filter but it doesn't work either.

Is there an Angular way for doing this?