AngularJS $scope is undefined when a function is called from HTML page not .js file

Question

I have this: $scope.products;
I set the value on it like this: $scope.products = plans; where plans is the result I get back from a call. If I debug, here, I have $scope and $scope.products in the debugger.

Example:

But then I do this from my .html:

<td>
  <span data-i18n="psngr.billing.pay.overview.total">
    Total
  </span> 
  <label class="bold">
    <span ng-bind-html="prices.currency"></span>
    {{ roundPrice(products[0].price.val)}}
  </label>
  <span id="vat" ng-show="prices.currency_code === 'EUR'"> 
    (+ 
    <span ng-bind-html="prices.currency"></span>
    {{products[0].vat}} 
    <span data-i18n="psngr.billing.vat"></span>
    )
  </span>
</td>

Basically calling the roundPrice method from my .js file, which does this:

$scope.roundPrice = function(price) {
  if (!price) {
    return 0;
  }
  // potentially round the price
  if (price % 1 === 0) {
    return price.toFixed(0);
  }
  return price.toFixed(2);
};

But here my scope is undefined, and also price, cause of this. Why?

Example:

Answer 1

After looking over the response that we get from the server, I understood better what the issue was: I was getting the price as a integer. so then of course price.val would get underfined. Which means it now works, after I changed the code to this:

roundPrice(products[0].price)}}