AngularJS performance in Firefox - angularjs

Question

I am building an application with AngularJS, and I am facing problems with the firefox. I think it's because I use multiple ng-repeat inside others ng-repeat, I have already tried almost all what I found in stackoverflow and forums.
I have a big table with multiple loops, this is what the table looks like :
<table class="booking-table table table-condensed mergeCells"
id="booking-table" ng-if="bookingSelected.accounts.length != 0">
<thead>
<tr>
<th colspan="10" class="transparent separator"></th>
<th colspan="2" style="border-top: 1px solid #000 !important;">OPPORTUNITY
DEFINITION</th>
<td class="separator"></td>
</tr>
<tr>
<th colspan="2">REGION</th>
<th>COUNTRY</th>
<th>MARKETS</th>
<th>SERVICE</th>
<th>TYPE</th>
<th>CUSTOMER</th>
<th>BDO Ref</th>
<th style="width: 100px !important;">Probability %</th>
<th style="width: 110px !important;">Booking Revenue</th>
<th class="gray" style="width: 10px !important;">Nb</th>
<th class="gray" style="width: 221px !important;">Name</th>
<th class="separator"></th>
<th class="transparent po-info left"
style="text-align: center;">PO Number</th>
<th class="transparent po-info left"
style="width: 80px !important; text-align: center;"
colspan="2">PO Amount</th>
</tr>
</thead>
<tbody bindonce
ng-repeat="account in bookingSelected.accounts track by account.id">
<!-- Booking line -->
<tr class="gray">
<td rowspan="2" colspan="10" class="separator"><span
class="remove-opp button-hover" ng-if="isNotReadOnlyAdmin()"
ng-click="addOpportunity(account)"><i
class="fa fa-plus"></i> Add</span><span
class="remove-opp button-hover readOnlyButtons"
ng-if="isReadOnlyAdmin()"><i class="fa fa-plus"></i>
Add</span> <span class="remove-opp button-hover"
ng-if="account.id == null && currentUser.isAdministrator"
ng-click="removeAccount(account)"><i
class="fa fa-times"></i> Remove Account</span></td>
<td colspan="2">BOOKING GOALS</td>
<td rowspan="2" class="separator"></td>
<td class="po-info"></td>
<td class="transparent right po-info input number" colspan="2">
<input ng-model-options="{ debounce: 600 }"
ng-model="account.bookingGoals" class="input-number"
ng-change="totalAccountOpportunity(account)"></input> <span
class="suffix">€</span>
</td>
</tr>
<tr class="gray">
<td colspan="2" class="transparent text-red">REMAINING
BOOKING GOALS proba weight</td>
<td class="po-info"></td>
<td class="transparent right po-info input"
ng-class="{'text-red' : account.remaining > 0, 'text-green' : account.remaining <= 0}"
colspan="2">
<div>
<span> {{ account.remaining | number }} € </span>
</div>
</td>
</tr>
<!-- Account -->
<tr class="orange" bindonce
ng-repeat-start="opportunity in account.opportunities track by opportunity.id">
<td class="remove-opp" ng-if="showRemoveButton(opportunity)"
ng-click="removeOpportunity(account, opportunity)">
<center>
<i class="fa fa-times"></i>
</center>
</td>
<td class="center input" ng-click="makeRowActive(null)"
ng-if="showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text" ng-model="account.title"></td>
<td class="center input" colspan="2"
ng-click="makeRowActive(null)"
ng-if="!showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text" ng-model="account.title"></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="COUNTRY" popover-trigger="'focus'"
ng-model="opportunity.country"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="opportunity.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="opportunity.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="opportunity.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="opportunity.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)">{{
opportunity.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opportunity.probability.value >= 90, 'orange' : opportunity.probability.value == 60, 'red' : opportunity.probability.value == 30, 'gray' : opportunity.probability.value < 30}"
ng-click="makeRowActive(null)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="opportunity.probability"
ng-change="updatePoAmmountOpportunity(account, opportunity)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(null)">
<div ng-if="showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 30px;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'"
ng-model="opportunity.nb"></td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 300px !important;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
ng-model="opportunity.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(null)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="opportunity.revenue" uib-popover="REVENUE"
popover-trigger="'focus'" class="input-number"
ng-change="updatePoAmmountOpportunity(account, opportunity)">
</td>
<td class="right po-info input" ng-click="makeRowActive(null)">
<div ng-if="showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="remove-opp" title="Add opportunity"
ng-if="isNotReadOnly()"
ng-click="addOpportunityChildren(opportunity)">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
<td class="remove-opp readOnlyButtons"
title="Add opportunity (disabled)" ng-if="isReadOnly()">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
</tr>
<!-- Opportunities -->
<tr bindonce
ng-repeat="opp in opportunity.opportunities track by opp.id"
ng-class="{'active' : opp == activeOpp}">
<td class="center input rowSpan" colspan="2"
test="{{ account.title }}" ng-click="makeRowActive(opp)">
{{ account.title }}</td>
<td class="input" ng-click="makeRowActive(null)"><select
ng-model="opp.country" uib-popover="COUNTRY"
popover-trigger="'focus'"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="opp.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="opp.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="opp.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="opp.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" style="padding-left: 5px !important;"
ng-class="{'redB' : opp.bdoNumber == null || opp.bdoNumber == ''}"
ng-click="makeRowActive(opp)">{{ opp.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opp.probability.value >= 90, 'orange' : opp.probability.value == 60, 'red' : opp.probability.value == 30, 'gray' : opp.probability.value < 30}"
ng-click="makeRowActive(opp)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="opp.probability"
ng-change="updatePoAmmountOpportunityChild(opp, account)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(opp)">
<div>
<span> {{ opp.poAmmount | number }} € </span>
</div>
</td>
<td style="width: 30px;" class="input"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'" uib-popover="Nb"
popover-trigger="'focus'" ng-model="opp.nb"></td>
<td class="input" ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
type="text" ng-model="opp.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(opp)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="opp.po" uib-popover="PO Number"
popover-trigger="'focus'">
</td>
<td class="right po-info input number"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" uib-popover="PO Amount"
popover-trigger="'focus'" ng-model="opp.poAmmount"
class="input-number"
ng-change="updatePoAmmountOpportunityChild(opp, account)"></input>
<span class="suffix">€</span></td>
<td ng-if="isNotReadOnly()"><i
class="fa fa-chevron-up remove-opp" title="Move up"
ng-click="opportunityToUp(opportunity, opp)"></i> <i
class="fa fa-chevron-down remove-opp" title="Move down"
ng-click="opportunityToDown(opportunity, opp)"></i> <i
class="fa fa-times remove-opp" title="Remove opportunity"
ng-if="showRemoveButton(opp)"
ng-click="removeOpportunityChildren(opportunity, opp, account)"></i>
<i class="fa fa-clone remove-opp"
title="Duplicate opportunity"
ng-click="duplicateOpportunityChildren(opportunity, opp)"></i>
<i class="fa fa-eye remove-opp" title="Show history"
ng-click="showHistory(account, opportunity, opp)"
data-toggle="modal" data-target="#opportunityHistory"></i></td>
<td ng-if="isReadOnly()" class="readOnlyButtons"><i
class="fa fa-chevron-up remove-opp" title="Move up (disabled)"></i>
<i class="fa fa-chevron-down remove-opp"
title="Move down (disabled)"></i> <i
class="fa fa-times remove-opp"
title="Remove opportunity (disabled)"></i> <i
class="fa fa-clone remove-opp"
title="Duplicate opportunity (disabled)"></i> <i
class="fa fa-eye remove-opp" title="Show history (disabled)"></i></td>
</tr>
<!-- Total -->
<tr class="total" ng-if="$last">
<td colspan="10" class="separator"></td>
<td colspan="2">TOTAL {{ account.title }}</td>
<td class="separator"></td>
<td></td>
<td class="center" colspan="2">
<div>
<span> {{ opportunity.total }} € </span>
</div>
</td>
</tr>
<tr ng-if="($index + 1) < bookingSelected.accounts.length"
ng-repeat-end>
<td colspan="16"
style="height: 10px !important; border: none !important; background: #fff !important;"></td>
</tr>
</tbody>
<tr class="separator"></tr>
<tr class="total">
<td colspan="12">TOTAL SUM</td>
<td class="separator"></td>
<td class="total-sum"></td>
<td class="center total-sum" colspan="2">
<div>
<span> {{ totalBooking | number }} € </span>
</div>
</td>
</tr>
</table>
I am using now the bindonce module.
In Google Chrome I have no problems with the performance, it's only in Mozilla firefox (I tried multiple version of this browser, all have the same issue).
Bellow is a snapshot of the firefox performance tool :
UPDATED
<table class="booking-table table table-condensed mergeCells"
id="booking-table" ng-if="::bookingSelected.accounts.length">
<thead>
<tr>
<th colspan="10" class="transparent separator"></th>
<th colspan="2" style="border-top: 1px solid #000 !important;">OPPORTUNITY
DEFINITION</th>
<td class="separator"></td>
</tr>
<tr>
<th colspan="2">REGION</th>
<th>COUNTRY</th>
<th>MARKETS</th>
<th>SERVICE</th>
<th>TYPE</th>
<th>CUSTOMER</th>
<th>BDO Ref</th>
<th style="width: 100px !important;">Probability %</th>
<th style="width: 110px !important;">Booking Revenue</th>
<th class="gray" style="width: 10px !important;">Nb</th>
<th class="gray" style="width: 221px !important;">Name</th>
<th class="separator"></th>
<th class="transparent po-info left"
style="text-align: center;">PO Number</th>
<th class="transparent po-info left"
style="width: 80px !important; text-align: center;"
colspan="2">PO Amount</th>
</tr>
</thead>
<tbody bindonce
ng-repeat="account in bookingSelected.accounts track by $index">
<!-- Booking line -->
<tr class="gray">
<td rowspan="2" colspan="10" class="separator"><span
class="remove-opp button-hover" ng-if="isNotReadOnlyAdmin()"
ng-click="addOpportunity(account)"><i
class="fa fa-plus"></i> Add</span><span
class="remove-opp button-hover readOnlyButtons"
ng-if="isReadOnlyAdmin()"><i class="fa fa-plus"></i>
Add</span> <span class="remove-opp button-hover"
ng-if="account.id == null && currentUser.isAdministrator"
ng-click="removeAccount(account)"><i
class="fa fa-times"></i> Remove Account</span></td>
<td colspan="2">BOOKING GOALS</td>
<td rowspan="2" class="separator"></td>
<td class="po-info"></td>
<td class="transparent right po-info input number" colspan="2">
<input ng-model-options="{ debounce: 600 }"
ng-model="::account.bookingGoals" class="input-number"
ng-change="::totalAccountOpportunity(account)"></input> <span
class="suffix">€</span>
</td>
</tr>
<tr class="gray">
<td colspan="2" class="transparent text-red">REMAINING
BOOKING GOALS proba weight</td>
<td class="po-info"></td>
<td class="transparent right po-info input"
ng-class="{'text-red' : account.remaining > 0, 'text-green' : account.remaining <= 0}"
colspan="2">
<div>
<span> {{ ::(account.remaining | number) }} € </span>
</div>
</td>
</tr>
<!-- Account -->
<tr class="orange" bindonce
ng-repeat-start="opportunity in account.opportunities track by $index">
<td class="remove-opp" ng-if="::showRemoveButton(opportunity)"
ng-click="removeOpportunity(account, opportunity)">
<center>
<i class="fa fa-times"></i>
</center>
</td>
<td class="center input" ng-click="makeRowActive(null)"
ng-if="::showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text"
ng-model="::account.title"></td>
<td class="center input" colspan="2"
ng-click="makeRowActive(null)"
ng-if="::(!showRemoveButton(opportunity))"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text"
ng-model="::account.title"></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="COUNTRY" popover-trigger="'focus'"
ng-model="::opportunity.country"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="::opportunity.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="::opportunity.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="::opportunity.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="::opportunity.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)">{{
::opportunity.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opportunity.probability.value >= 90, 'orange' : opportunity.probability.value == 60, 'red' : opportunity.probability.value == 30, 'gray' : opportunity.probability.value < 30}"
ng-click="makeRowActive(null)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="::opportunity.probability"
ng-change="updatePoAmmountOpportunity(account, opportunity)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(null)">
<div ng-if="::showPoAmmount(opportunity)">
<span> {{ ::(opportunity.poAmmount | number) }} € </span>
</div>
</td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 30px;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'"
ng-model="::opportunity.nb"></td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 300px !important;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
ng-model="::opportunity.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(null)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="::opportunity.revenue" uib-popover="REVENUE"
popover-trigger="'focus'" class="input-number"
ng-change="updatePoAmmountOpportunity(account, opportunity)">
</td>
<td class="right po-info input" ng-click="makeRowActive(null)">
<div ng-if="::showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="remove-opp" title="Add opportunity"
ng-if="::isNotReadOnly()"
ng-click="addOpportunityChildren(opportunity)">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
<td class="remove-opp readOnlyButtons"
title="Add opportunity (disabled)" ng-if="::isReadOnly()">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
</tr>
<!-- Opportunities -->
<tr bindonce
ng-repeat="opp in opportunity.opportunities track by $index"
ng-class="{'active' : opp == activeOpp}">
<td class="center input" colspan="2"
ng-click="makeRowActive(opp)">{{ ::account.title }}</td>
<td class="input" ng-click="makeRowActive(null)"><select
ng-model="::opp.country" uib-popover="COUNTRY"
popover-trigger="'focus'"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="::opp.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="::opp.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="::opp.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="::opp.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" style="padding-left: 5px !important;"
ng-class="{'redB' : opp.bdoNumber == null || opp.bdoNumber == ''}"
ng-click="makeRowActive(opp)">{{ opp.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opp.probability.value >= 90, 'orange' : opp.probability.value == 60, 'red' : opp.probability.value == 30, 'gray' : opp.probability.value < 30}"
ng-click="makeRowActive(opp)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="::opp.probability"
ng-change="updatePoAmmountOpportunityChild(opp, account)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(opp)">
<div>
<span> {{ opp.poAmmount | number }} € </span>
</div>
</td>
<td style="width: 30px;" class="input"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'" uib-popover="Nb"
popover-trigger="'focus'" ng-model="::opp.nb"></td>
<td class="input" ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
type="text" ng-model="::opp.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(opp)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="::opp.po" uib-popover="PO Number"
popover-trigger="'focus'">
</td>
<td class="right po-info input number"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" uib-popover="PO Amount"
popover-trigger="'focus'" ng-model="::opp.poAmmount"
class="input-number"
ng-change="updatePoAmmountOpportunityChild(opp, account)"></input>
<span class="suffix">€</span></td>
<td ng-if="::isNotReadOnly()"><i
class="fa fa-chevron-up remove-opp" title="Move up"
ng-click="opportunityToUp(opportunity, opp)"></i> <i
class="fa fa-chevron-down remove-opp" title="Move down"
ng-click="opportunityToDown(opportunity, opp)"></i> <i
class="fa fa-times remove-opp" title="Remove opportunity"
ng-if="::showRemoveButton(opp)"
ng-click="removeOpportunityChildren(opportunity, opp, account)"></i>
<i class="fa fa-clone remove-opp"
title="Duplicate opportunity"
ng-click="duplicateOpportunityChildren(opportunity, opp)"></i>
<i class="fa fa-eye remove-opp" title="Show history"
ng-click="showHistory(account, opportunity, opp)"
data-toggle="modal" data-target="#opportunityHistory"></i></td>
<td ng-if="::isReadOnly()" class="readOnlyButtons"><i
class="fa fa-chevron-up remove-opp" title="Move up (disabled)"></i>
<i class="fa fa-chevron-down remove-opp"
title="Move down (disabled)"></i> <i
class="fa fa-times remove-opp"
title="Remove opportunity (disabled)"></i> <i
class="fa fa-clone remove-opp"
title="Duplicate opportunity (disabled)"></i> <i
class="fa fa-eye remove-opp" title="Show history (disabled)"></i></td>
</tr>
<!-- Total -->
<tr class="total" ng-if="::$last">
<td colspan="10" class="separator"></td>
<td colspan="2">TOTAL {{ account.title }}</td>
<td class="separator"></td>
<td></td>
<td class="center" colspan="2">
<div>
<span> {{ opportunity.total }} € </span>
</div>
</td>
</tr>
<tr ng-if="::(($index + 1) < bookingSelected.accounts.length)"
ng-repeat-end>
<td colspan="16"
style="height: 10px !important; border: none !important; background: #fff !important;"></td>
</tr>
</tbody>
<tr class="separator"></tr>
<tr class="total">
<td colspan="12">TOTAL SUM</td>
<td class="separator"></td>
<td class="total-sum"></td>
<td class="center total-sum" colspan="2">
<div>
<span> {{ ::(totalBooking | number) }} € </span>
</div>
</td>
</tr>
</table>

Answer 1

try to use this in all app:
{{ ::(opportunity.poAmmount | number) }}
function in ng-if and bg-class is a pure evil
ng-if="::showRemoveButton(opportunity)"
refactor ng-if="bookingSelected.accounts.length != 0" => ng-if="::bookingSelected.accounts.length"
but remember that bind-once inside ng-if is very fragile/ you should return undefiend from function if data do not get yet from server