Investment |
Mix |
Asset Class |
1 Yr |
5 Yr |
10 Yr / Incep |
Gross
|
|
|---|---|---|---|---|---|---|---|
| UFOA High Equity Option (UF3HEQ) |
75% equities / 25% bonds
|
Asset Allocation |
8.70%
|
11.43%
|
7.03%
|
N/A
|
|
| Neuberger Berman Genesis Fund - Trust (NB-GEN) |
50% equities / 50% bonds
|
Mid Cap |
4.87%
|
14.32%
|
9.41%
|
N/A
|
|
| WFOA High Equity Option (UF3HAA) |
75% equities / 25% bonds
|
Asset Allocation |
8.70%
|
11.43%
|
7.03%
|
N/A
|
|
| XFEE High Equity Option (XFEEEQ) |
75% equities / 25% bonds
|
Asset Allocation |
8.70%
|
11.43%
|
7.03%
|
N/A
|
|
| ADSA High Equity Option (ADSAEQ) |
75% equities / 25% bonds
|
Asset Allocation |
8.70%
|
11.43%
|
7.03%
|
N/A
|
|
| BFBA High Equity Option (BFBHEQ) |
75% equities / 25% bonds
|
Asset Allocation |
8.70%
|
11.43%
|
7.03%
|
N/A
|
|
| Russell LifePoints 2040 Strategy R5 |
40% equities / 60% bonds
|
N/A
|
N/A
|
N/A
|
N/A
|
||
| Great-West SF Lifetime 2020 Trust |
70% equities / 30% bonds
|
N/A
|
N/A
|
N/A
|
N/A
|
||
| Great-West SF Lifetime 2015 Trust |
50% equities / 50% bonds
|
N/A
|
N/A
|
N/A
|
N/A
|
||
| Russell LifePoints 2030 Strategy R5 |
50% equities / 50% bonds
|
N/A
|
N/A
|
N/A
|
N/A
|
||
| Russell LifePoints 2020 Strategy R5 |
50% equities / 50% bonds
|
N/A
|
N/A
|
N/A
|
N/A
|
||
| Great-West SF Lifetime 2030 Trust |
80% equities / 20% bonds
|
N/A
|
N/A
|
N/A
|
N/A
|
||
| Great-West SF Lifetime 2025 Trust |
50% equities / 50% bonds
|
N/A
|
N/A
|
N/A
|
N/A
|
||
| Really Coolness |
100% equities / 0% bonds
|
Radical Funds |
-6.98%
|
N/A
|
6.13%
|
N/A
|
|
| Super Cool Fund |
100% equities / 0% bonds
|
Super Funds |
-6.98%
|
N/A
|
6.13%
|
N/A
|
|
| Rad Coolness |
100% equities / 0% bonds
|
Radical Funds |
-6.98%
|
N/A
|
6.13%
|
N/A
|
The allocations all funds table, used in the allocations portfolio view, is an allocations table: uses the allocations-table-wrapper and allocations-fund-table class, as well as a unique ID and custom columns.
<div class="allocation-table-wrapper">
<table class="table allocation-fund-table" id="allocation-all-funds-table">
<thead>
<tr>
<th class="text-center">
<!-- ngIf: !allFundsIncluded --><i ng-if="!allFundsIncluded" class="em-plus-bold pointer ng-scope" ng-click="toggleIncludeAllFunds()"></i><!-- end ngIf: !allFundsIncluded -->
<!-- ngIf: allFundsIncluded -->
</th>
<th>
<h4>Investment</h4>
</th>
<th>
<h4 class="invisible-xs">Mix</h4>
</th>
<th>
<h4 class="invisible-xs">Asset Class</h4>
</th>
<th class="text-right">
<h4 aria-label="1 Year">1 Yr</h4>
</th>
<th class="text-right">
<h4 aria-label="5 Year">5 Yr</h4>
</th>
<th class="text-right">
<h4 aria-label="10 Year / Inception">10 Yr / Incep</h4>
</th>
<th class="text-right">
<h4 aria-label="Gross Expense Ratio">Gross<br>Exp %</h4>
</th>
</tr>
</thead>
<tbody class="allocation-available-funds">
<!-- ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">UFOA High Equity Option (UF3HEQ)</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">75</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">25</span>
<span class="visible-print ng-binding">75% equities / 25% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Asset Allocation</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">8.70%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">11.43%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">7.03%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Neuberger Berman Genesis Fund - Trust (NB-GEN)</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">50</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">50</span>
<span class="visible-print ng-binding">50% equities / 50% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Mid Cap</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">4.87%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">14.32%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">9.41%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">WFOA High Equity Option (UF3HAA)</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">75</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">25</span>
<span class="visible-print ng-binding">75% equities / 25% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Asset Allocation</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">8.70%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">11.43%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">7.03%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">XFEE High Equity Option (XFEEEQ)</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">75</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">25</span>
<span class="visible-print ng-binding">75% equities / 25% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Asset Allocation</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">8.70%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">11.43%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">7.03%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">ADSA High Equity Option (ADSAEQ)</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">75</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">25</span>
<span class="visible-print ng-binding">75% equities / 25% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Asset Allocation</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">8.70%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">11.43%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">7.03%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">BFBA High Equity Option (BFBHEQ)</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">75</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">25</span>
<span class="visible-print ng-binding">75% equities / 25% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Asset Allocation</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">8.70%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">11.43%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">7.03%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) --><span ng-if="isCurrentFund(availableFund)" class="disabled allocation-icon em-check-bold ng-scope"></span><!-- end ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Russell LifePoints 2040 Strategy R5</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">40</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">60</span>
<span class="visible-print ng-binding">40% equities / 60% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding"></span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Great-West SF Lifetime 2020 Trust</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">70</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">30</span>
<span class="visible-print ng-binding">70% equities / 30% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding"></span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Great-West SF Lifetime 2015 Trust</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">50</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">50</span>
<span class="visible-print ng-binding">50% equities / 50% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding"></span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Russell LifePoints 2030 Strategy R5</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">50</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">50</span>
<span class="visible-print ng-binding">50% equities / 50% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding"></span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Russell LifePoints 2020 Strategy R5</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">50</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">50</span>
<span class="visible-print ng-binding">50% equities / 50% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding"></span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Great-West SF Lifetime 2030 Trust</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">80</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">20</span>
<span class="visible-print ng-binding">80% equities / 20% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding"></span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) --><label ng-if="!isCurrentFund(availableFund)" class="ng-scope"><input type="checkbox" ng-click="toggleIncludeFund(availableFund)" ng-model="availableFund.selected" class="ng-pristine ng-untouched ng-valid"></label><!-- end ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Great-West SF Lifetime 2025 Trust</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">50</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">50</span>
<span class="visible-print ng-binding">50% equities / 50% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding"></span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) --><span ng-if="isCurrentFund(availableFund)" class="disabled allocation-icon em-check-bold ng-scope"></span><!-- end ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="" target="_blank">Really Coolness</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope all-equities" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">100</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">0</span>
<span class="visible-print ng-binding">100% equities / 0% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Radical Funds</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope red">-6.98%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">6.13%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) --><span ng-if="isCurrentFund(availableFund)" class="disabled allocation-icon em-check-bold ng-scope"></span><!-- end ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="http://google.com" target="_blank" href="http://google.com">Super Cool Fund</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope all-equities" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">100</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">0</span>
<span class="visible-print ng-binding">100% equities / 0% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Super Funds</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope red">-6.98%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">6.13%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index --><tr ng-repeat="availableFund in availableFunds | filter : fundFilterFunction track by $index" ng-class="{'selected-available-fund':availableFund.selected}" class="ng-scope">
<td class="allocation-add-portfolio text-center">
<!-- ngIf: isCurrentFund(availableFund) --><span ng-if="isCurrentFund(availableFund)" class="disabled allocation-icon em-check-bold ng-scope"></span><!-- end ngIf: isCurrentFund(availableFund) -->
<!-- ngIf: !isCurrentFund(availableFund) -->
</td>
<td class="col-md-4">
<!-- <a ng-click="openModal('fund-detail', availableFund)" class="allocation-fund-name no-underline"></a> -->
<a class="allocation-fund-name no-underline ng-binding" ng-href="" target="_blank">Rad Coolness</a>
</td>
<td class="col-md-2">
<div class="allocation-mix ng-isolate-scope all-equities" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="availableFund.equityFundMix" bonds="availableFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">100</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">0</span>
<span class="visible-print ng-binding">100% equities / 0% bonds</span>
</div>
</td>
<td class="col-md-2">
<span class="ng-binding">Radical Funds</span>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.oneYearToDateROR" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope red">-6.98%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.fiveYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.ratings.tenYear.yearToDateRateOfReturn" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' --><span ng-if="rate && rate!=='N/A'" ng-class="{'red' : rate < 0}" class="ng-binding ng-scope">6.13%
</span><!-- end ngIf: rate && rate!=='N/A' -->
</div>
</td>
<td class="col-md-1 text-right">
<div rate="availableFund.investmentRatingData.grossOperatingExpenseRatio" class="ng-isolate-scope">
<!-- ngIf: !rate || rate==='N/A' --><span ng-if="!rate || rate==='N/A'" class="ng-scope">N/A</span><!-- end ngIf: !rate || rate==='N/A' -->
<!-- ngIf: rate && rate!=='N/A' -->
</div>
</td>
</tr><!-- end ngRepeat: availableFund in availableFunds | filter : fundFilterFunction track by $index -->
</tbody>
</table>
</div>The allocations current funds table from the portfolio view uses the allocations-table-wrapper and allocation-fund-table class, as well as a unique ID and custom columns.
<div class="allocation-table-wrapper">
<form name="portfolio" ng-submit="submitIfCanSubmit($event)" class="ng-valid ng-valid-ng-max ng-valid-pattern ng-dirty">
<table class="table allocation-fund-table" id="allocation-current-funds-table">
<colgroup>
<col class="allocation-col-del">
<col class="allocation-col-investment">
<col class="allocation-col-mix">
<col class="allocation-col-asset">
<col class="allocation-col-slider">
<col class="allocation-col-amount">
</colgroup>
<thead>
<tr>
<th>
<div aria-label="Delete">Del</div>
</th>
<th>
<div>Investment</div>
</th>
<th>
<div>Mix</div>
</th>
<th>
<div>Asset Class</div>
</th>
<th>
<div>Allocation</div>
</th>
<th></th>
</tr>
</thead>
<!-- ngRepeat: currentFund in currentFunds --><tbody class="allocation-current-funds ng-scope" ng-repeat="currentFund in currentFunds">
<tr>
<td>
<a href="" aria-label="Remove fund Really Coolness" ng-click="removeFund(currentFund)" class="btn btn-link allocation-icon">
<span class="em-x-bold"></span>
</a>
</td>
<td class="allocation-fund-name-container">
<!-- <a aria-label="See details about " ng-click="openModal('fund-detail', currentFund)" class="allocation-fund-name no-underline"></a> -->
<!-- ngIf: currentFund.overviewUrl -->
<!-- ngIf: !currentFund.overviewUrl --><span ng-if="!currentFund.overviewUrl" class="ng-binding ng-scope">Really Coolness</span><!-- end ngIf: !currentFund.overviewUrl -->
</td>
<td class="allocation-mix-container">
<div class="allocation-mix ng-isolate-scope all-equities" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="currentFund.equityFundMix" bonds="currentFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">100</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">0</span>
<span class="visible-print ng-binding">100% equities / 0% bonds</span>
</div>
</td>
<td class="allocation-fund-category-container">
<span aria-label="Asset class: " class="fund-category ng-binding">Radical Funds</span>
</td>
<td class="allocation-range-slider">
<div class="allocation-range-slider-wrapper">
<input type="range" id="range-25GJAO1" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'focus input change blur', debounce: {'default': 10, 'blur': 0} }" ng-change="changeSliderFor(currentFund)" min="0" max="100" decimals="2" ng-max="100" ng-blur="fundSliderChange(currentFund)" ng-focus="unlockFund(currentFund)" ng-mouseup="lockFundIfDirty(currentFund)" ng-mousedown="unlockFund(currentFund)" aria-labeledby="Percentage allocated to the fund Really Coolness" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max">
</div>
</td>
<td>
<div class="input-group-percentage allocation-percentage input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-link" type="button" ng-click="toggleFund(currentFund)" ng-class="{ 'active': currentFund.locked }" title="Automatic adjustments are allowed">
<span class="em-lock allocation-icon"></span>
<!-- ngIf: !fundIsLocked(currentFund) --><span class="sr-only sr-only-focusable ng-scope" ng-if="!fundIsLocked(currentFund)">Lock</span><!-- end ngIf: !fundIsLocked(currentFund) -->
<!-- ngIf: fundIsLocked(currentFund) -->
</button>
</span>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max ng-valid-pattern" name="allocationPercentage" id="text-25GJAO1" numbers-only="" pattern="[0-9]+" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'default keypress blur', debounce: {'default': 0, 'blur': 0} }" ng-value="currentFund.allocationPercentage | number:2" ng-keypress="throttledAdjustAllocationsToRemainder(currentFund)" ng-change="throttledAdjustAllocationsToRemainder(currentFund)" ng-blur="fundInputBlur(currentFund)" ng-focus="unlockFund(currentFund);" ng-max="100" ng-paste="filterValue($event)" select-on-click="" value="25.00">
<label class="input-group-addon" for="text-25GJAO1">%</label>
</div>
<div class="visible-print ng-binding">25</div>
</td>
</tr>
</tbody><!-- end ngRepeat: currentFund in currentFunds --><tbody class="allocation-current-funds ng-scope" ng-repeat="currentFund in currentFunds">
<tr>
<td>
<a href="" aria-label="Remove fund Super Cool Fund" ng-click="removeFund(currentFund)" class="btn btn-link allocation-icon">
<span class="em-x-bold"></span>
</a>
</td>
<td class="allocation-fund-name-container">
<!-- <a aria-label="See details about " ng-click="openModal('fund-detail', currentFund)" class="allocation-fund-name no-underline"></a> -->
<!-- ngIf: currentFund.overviewUrl --><a href="http://google.com" ng-if="currentFund.overviewUrl" aria-label="See details about Super Cool Fund" ng-href="http://google.com" target="_blank" class="allocation-fund-name no-underline ng-binding ng-scope">Super Cool Fund</a><!-- end ngIf: currentFund.overviewUrl -->
<!-- ngIf: !currentFund.overviewUrl -->
</td>
<td class="allocation-mix-container">
<div class="allocation-mix ng-isolate-scope all-equities" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="currentFund.equityFundMix" bonds="currentFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">100</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">0</span>
<span class="visible-print ng-binding">100% equities / 0% bonds</span>
</div>
</td>
<td class="allocation-fund-category-container">
<span aria-label="Asset class: " class="fund-category ng-binding">Super Funds</span>
</td>
<td class="allocation-range-slider">
<div class="allocation-range-slider-wrapper">
<input type="range" id="range-25GJAP2" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'focus input change blur', debounce: {'default': 10, 'blur': 0} }" ng-change="changeSliderFor(currentFund)" min="0" max="100" decimals="2" ng-max="100" ng-blur="fundSliderChange(currentFund)" ng-focus="unlockFund(currentFund)" ng-mouseup="lockFundIfDirty(currentFund)" ng-mousedown="unlockFund(currentFund)" aria-labeledby="Percentage allocated to the fund Super Cool Fund" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max">
</div>
</td>
<td>
<div class="input-group-percentage allocation-percentage input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-link" type="button" ng-click="toggleFund(currentFund)" ng-class="{ 'active': currentFund.locked }" title="Automatic adjustments are allowed">
<span class="em-lock allocation-icon"></span>
<!-- ngIf: !fundIsLocked(currentFund) --><span class="sr-only sr-only-focusable ng-scope" ng-if="!fundIsLocked(currentFund)">Lock</span><!-- end ngIf: !fundIsLocked(currentFund) -->
<!-- ngIf: fundIsLocked(currentFund) -->
</button>
</span>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max ng-valid-pattern" name="allocationPercentage" id="text-25GJAP2" numbers-only="" pattern="[0-9]+" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'default keypress blur', debounce: {'default': 0, 'blur': 0} }" ng-value="currentFund.allocationPercentage | number:2" ng-keypress="throttledAdjustAllocationsToRemainder(currentFund)" ng-change="throttledAdjustAllocationsToRemainder(currentFund)" ng-blur="fundInputBlur(currentFund)" ng-focus="unlockFund(currentFund);" ng-max="100" ng-paste="filterValue($event)" select-on-click="" value="25.00">
<label class="input-group-addon" for="text-25GJAP2">%</label>
</div>
<div class="visible-print ng-binding">25</div>
</td>
</tr>
</tbody><!-- end ngRepeat: currentFund in currentFunds --><tbody class="allocation-current-funds ng-scope" ng-repeat="currentFund in currentFunds">
<tr>
<td>
<a href="" aria-label="Remove fund Rad Coolness" ng-click="removeFund(currentFund)" class="btn btn-link allocation-icon">
<span class="em-x-bold"></span>
</a>
</td>
<td class="allocation-fund-name-container">
<!-- <a aria-label="See details about " ng-click="openModal('fund-detail', currentFund)" class="allocation-fund-name no-underline"></a> -->
<!-- ngIf: currentFund.overviewUrl -->
<!-- ngIf: !currentFund.overviewUrl --><span ng-if="!currentFund.overviewUrl" class="ng-binding ng-scope">Rad Coolness</span><!-- end ngIf: !currentFund.overviewUrl -->
</td>
<td class="allocation-mix-container">
<div class="allocation-mix ng-isolate-scope all-equities" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="currentFund.equityFundMix" bonds="currentFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">100</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">0</span>
<span class="visible-print ng-binding">100% equities / 0% bonds</span>
</div>
</td>
<td class="allocation-fund-category-container">
<span aria-label="Asset class: " class="fund-category ng-binding">Radical Funds</span>
</td>
<td class="allocation-range-slider">
<div class="allocation-range-slider-wrapper">
<input type="range" id="range-25GJAQ3" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'focus input change blur', debounce: {'default': 10, 'blur': 0} }" ng-change="changeSliderFor(currentFund)" min="0" max="100" decimals="2" ng-max="100" ng-blur="fundSliderChange(currentFund)" ng-focus="unlockFund(currentFund)" ng-mouseup="lockFundIfDirty(currentFund)" ng-mousedown="unlockFund(currentFund)" aria-labeledby="Percentage allocated to the fund Rad Coolness" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max">
</div>
</td>
<td>
<div class="input-group-percentage allocation-percentage input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-link" type="button" ng-click="toggleFund(currentFund)" ng-class="{ 'active': currentFund.locked }" title="Automatic adjustments are allowed">
<span class="em-lock allocation-icon"></span>
<!-- ngIf: !fundIsLocked(currentFund) --><span class="sr-only sr-only-focusable ng-scope" ng-if="!fundIsLocked(currentFund)">Lock</span><!-- end ngIf: !fundIsLocked(currentFund) -->
<!-- ngIf: fundIsLocked(currentFund) -->
</button>
</span>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max ng-valid-pattern" name="allocationPercentage" id="text-25GJAQ3" numbers-only="" pattern="[0-9]+" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'default keypress blur', debounce: {'default': 0, 'blur': 0} }" ng-value="currentFund.allocationPercentage | number:2" ng-keypress="throttledAdjustAllocationsToRemainder(currentFund)" ng-change="throttledAdjustAllocationsToRemainder(currentFund)" ng-blur="fundInputBlur(currentFund)" ng-focus="unlockFund(currentFund);" ng-max="100" ng-paste="filterValue($event)" select-on-click="" value="25.00">
<label class="input-group-addon" for="text-25GJAQ3">%</label>
</div>
<div class="visible-print ng-binding">25</div>
</td>
</tr>
</tbody><!-- end ngRepeat: currentFund in currentFunds --><tbody class="allocation-current-funds ng-scope" ng-repeat="currentFund in currentFunds">
<tr>
<td>
<a href="" aria-label="Remove fund Great-West SF Lifetime 2020 Trust" ng-click="removeFund(currentFund)" class="btn btn-link allocation-icon">
<span class="em-x-bold"></span>
</a>
</td>
<td class="allocation-fund-name-container">
<!-- <a aria-label="See details about " ng-click="openModal('fund-detail', currentFund)" class="allocation-fund-name no-underline"></a> -->
<!-- ngIf: currentFund.overviewUrl --><a href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" ng-if="currentFund.overviewUrl" aria-label="See details about Great-West SF Lifetime 2020 Trust" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" class="allocation-fund-name no-underline ng-binding ng-scope">Great-West SF Lifetime 2020 Trust</a><!-- end ngIf: currentFund.overviewUrl -->
<!-- ngIf: !currentFund.overviewUrl -->
</td>
<td class="allocation-mix-container">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="currentFund.equityFundMix" bonds="currentFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">70</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">30</span>
<span class="visible-print ng-binding">70% equities / 30% bonds</span>
</div>
</td>
<td class="allocation-fund-category-container">
<span aria-label="Asset class: " class="fund-category ng-binding"></span>
</td>
<td class="allocation-range-slider">
<div class="allocation-range-slider-wrapper">
<input type="range" id="range-CS20ZR1" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'focus input change blur', debounce: {'default': 10, 'blur': 0} }" ng-change="changeSliderFor(currentFund)" min="0" max="100" decimals="2" ng-max="100" ng-blur="fundSliderChange(currentFund)" ng-focus="unlockFund(currentFund)" ng-mouseup="lockFundIfDirty(currentFund)" ng-mousedown="unlockFund(currentFund)" aria-labeledby="Percentage allocated to the fund Great-West SF Lifetime 2020 Trust" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max">
</div>
</td>
<td>
<div class="input-group-percentage allocation-percentage input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-link active" type="button" ng-click="toggleFund(currentFund)" ng-class="{ 'active': currentFund.locked }" title="Automatic adjustments are being prevented">
<span class="em-lock allocation-icon"></span>
<!-- ngIf: !fundIsLocked(currentFund) -->
<!-- ngIf: fundIsLocked(currentFund) --><span class="sr-only sr-only-focusable ng-scope" ng-if="fundIsLocked(currentFund)">Unlock</span><!-- end ngIf: fundIsLocked(currentFund) -->
</button>
</span>
<input type="text" class="form-control ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max ng-dirty ng-valid-pattern" name="allocationPercentage" id="text-CS20ZR1" numbers-only="" pattern="[0-9]+" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'default keypress blur', debounce: {'default': 0, 'blur': 0} }" ng-value="currentFund.allocationPercentage | number:2" ng-keypress="throttledAdjustAllocationsToRemainder(currentFund)" ng-change="throttledAdjustAllocationsToRemainder(currentFund)" ng-blur="fundInputBlur(currentFund)" ng-focus="unlockFund(currentFund);" ng-max="100" ng-paste="filterValue($event)" select-on-click="" value="0.00">
<label class="input-group-addon" for="text-CS20ZR1">%</label>
</div>
<div class="visible-print ng-binding">0</div>
</td>
</tr>
</tbody><!-- end ngRepeat: currentFund in currentFunds --><tbody class="allocation-current-funds ng-scope" ng-repeat="currentFund in currentFunds">
<tr>
<td>
<a href="" aria-label="Remove fund Russell LifePoints 2040 Strategy R5" ng-click="removeFund(currentFund)" class="btn btn-link allocation-icon">
<span class="em-x-bold"></span>
</a>
</td>
<td class="allocation-fund-name-container">
<!-- <a aria-label="See details about " ng-click="openModal('fund-detail', currentFund)" class="allocation-fund-name no-underline"></a> -->
<!-- ngIf: currentFund.overviewUrl --><a href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" ng-if="currentFund.overviewUrl" aria-label="See details about Russell LifePoints 2040 Strategy R5" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" class="allocation-fund-name no-underline ng-binding ng-scope">Russell LifePoints 2040 Strategy R5</a><!-- end ngIf: currentFund.overviewUrl -->
<!-- ngIf: !currentFund.overviewUrl -->
</td>
<td class="allocation-mix-container">
<div class="allocation-mix ng-isolate-scope" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="currentFund.equityFundMix" bonds="currentFund.bondFundMix">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">40</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">60</span>
<span class="visible-print ng-binding">40% equities / 60% bonds</span>
</div>
</td>
<td class="allocation-fund-category-container">
<span aria-label="Asset class: " class="fund-category ng-binding"></span>
</td>
<td class="allocation-range-slider">
<div class="allocation-range-slider-wrapper">
<input type="range" id="range-RXLVX1" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'focus input change blur', debounce: {'default': 10, 'blur': 0} }" ng-change="changeSliderFor(currentFund)" min="0" max="100" decimals="2" ng-max="100" ng-blur="fundSliderChange(currentFund)" ng-focus="unlockFund(currentFund)" ng-mouseup="lockFundIfDirty(currentFund)" ng-mousedown="unlockFund(currentFund)" aria-labeledby="Percentage allocated to the fund Russell LifePoints 2040 Strategy R5" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max">
</div>
</td>
<td>
<div class="input-group-percentage allocation-percentage input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-link" type="button" ng-click="toggleFund(currentFund)" ng-class="{ 'active': currentFund.locked }" title="Automatic adjustments are allowed">
<span class="em-lock allocation-icon"></span>
<!-- ngIf: !fundIsLocked(currentFund) --><span class="sr-only sr-only-focusable ng-scope" ng-if="!fundIsLocked(currentFund)">Lock</span><!-- end ngIf: !fundIsLocked(currentFund) -->
<!-- ngIf: fundIsLocked(currentFund) -->
</button>
</span>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-ng-max ng-valid-pattern" name="allocationPercentage" id="text-RXLVX1" numbers-only="" pattern="[0-9]+" ng-model="currentFund.allocationPercentage" ng-model-options="{ updateOn: 'default keypress blur', debounce: {'default': 0, 'blur': 0} }" ng-value="currentFund.allocationPercentage | number:2" ng-keypress="throttledAdjustAllocationsToRemainder(currentFund)" ng-change="throttledAdjustAllocationsToRemainder(currentFund)" ng-blur="fundInputBlur(currentFund)" ng-focus="unlockFund(currentFund);" ng-max="100" ng-paste="filterValue($event)" select-on-click="" value="25.00">
<label class="input-group-addon" for="text-RXLVX1">%</label>
</div>
<div class="visible-print ng-binding">25</div>
</td>
</tr>
</tbody><!-- end ngRepeat: currentFund in currentFunds -->
<tfoot>
<tr>
<td colspan="2">
<a href="" aria-live="assertive" ng-click="viewAllFunds()" title="Add Funds" id="view-all-funds" class="btn btn-tertiary add-more-funds-button"><i class="fa fa-plus"></i> Add more funds / View all funds</a>
</td>
<td></td>
<td></td>
<td colspan="2">
<div class="allocation-funds-portfolio-total">Total: <span class="ng-binding" ng-class="{'red':getAllocationTotal() !== 100}">100%</span></div>
</td>
</tr>
</tfoot>
</table>
<div class="allocation-footer-buttons clearfix margin-top-200 margin-bottom-200">
<!-- ngIf: changeTargetMix -->
<!-- ngIf: !changeTargetMix --><a href="" ng-if="!changeTargetMix" ui-sref="allocations.selection" title="Back" class="btn btn-default pull-left back-button ng-scope" ng-click="backClick()">Back</a><!-- end ngIf: !changeTargetMix -->
<span class="spaced-buttons pull-right">
<a href="" ng-click="resetFunds()" title="Reset" id="reset-funds-changes" class="btn btn-link" ng-class="{'disabled':!pendingFundChanges()}" aria-disabled={!pendingFundChanges()}v">Reset All Changes</a>
<button type="submit" title="Submit" id="submit-button" class="btn btn-primary" ng-class="{'disabled':!canSubmitFunds()}" aria-disabled="{!canSubmitFunds()}">Submit</button>
</span>
</div>
</form>
</div>This equity mix slider is generated by the allocation-target-mix directive.
<div class="allocation-primary-content clearfix allocation-mix-wrapper">
<div class="col-md-2 equity-color target-mix-label">Equities</div>
<div class="allocation-mix-bar col-md-8">
<!-- Allocation Marker -->
<!-- ngIf: equitiesTarget -->
<div class="allocation-bar-equities allocation-bar" ng-style="{width: getTotalEquityBarPercentWidth()}" style="width: 92%;">
<span class="allocation-value ng-binding pull-right" ng-class="{'min-width':shouldHaveMinWidth(getTotalEquities()), 'pull-right':!shouldHaveMinWidth(getTotalEquities())}" aria-label="Percent of your funds that are equities: 100">100</span>
</div>
<!-- Allocation Marker -->
<!-- ngIf: originalFunds.length > 0 --><div ng-if="originalFunds.length > 0" class="allocation-current allocation-marker ng-scope" ng-style="{left: getEquitiesCurrent() + '%'}" style="left: 100%;">
<label class="range-slider-label align-right" ng-class="getAlignClass(getEquitiesCurrent())">Current Mix</label>
<span class="allocation-marker-mix-wrapper align-right" ng-class="getAlignClass(getEquitiesCurrent())">
<div class="allocation-mix ng-isolate-scope all-equities" ng-class="{'all-equities': (equities >= 100), 'all-bonds': (bonds >= 100)}" equities="getEquitiesCurrent()">
<span class="allocation-equities hidden-print ng-binding" aria-describedby="Equities">100</span>
<span class="allocation-bonds hidden-print ng-binding" aria-describedby="Bonds">0</span>
<span class="visible-print ng-binding">100% equities / 0% bonds</span>
</div>
</span>
<span class="allocation-marker-line"></span>
</div><!-- end ngIf: originalFunds.length > 0 -->
<div class="allocation-bar-bonds allocation-bar" ng-style="{width: getTotalBondBarPercentWidth()}" style="width: 8%;">
<span class="allocation-value ng-binding min-width" ng-class="{'min-width':shouldHaveMinWidth(getTotalBonds()), 'pull-left':!shouldHaveMinWidth(getTotalBonds())}" aria-label="Percent of your funds that are bonds or other types: 0">0</span>
</div>
</div>
<div class="col-md-2 text-right allocation-label-container bond-color target-mix-label">Bonds</div>
</div>
<div class="allocation-table-wrapper" style="height:400px;">
<div class="allocation-side-panel active" ng-class="{'active' : isFundFilterVisible}">
<span aria-hidden="true" class="em-x-bold small pull-right" ng-click="toggleFundFilter('fund-filter-view-toggle')"></span>
<div class="form-group">
<label class="alternative-label" for="fund_category">Asset Class</label>
<div class="custom-select custom-select-medium">
<select name="fund_category" class="form-control ng-pristine ng-untouched ng-valid" id="fund_category" ng-options="option.value as option.label for option in categoryOptions" ng-model="fundFilter.assetClass" ng-change="fundCategoryChange()"><option value="0" selected="selected" label="All">All</option><option value="1" label="Asset Allocation">Asset Allocation</option><option value="2" label="Mid Cap">Mid Cap</option><option value="3" label="Radical Funds">Radical Funds</option><option value="4" label="Super Funds">Super Funds</option></select>
</div>
</div>
<hr>
<div class="form-group filter-rate-of-return">
<label class="alternative-label" for="fund_category">Rate of Return</label>
<div class="form-inline-select margin-bottom-default">
<!-- <label class="alternative-label" for="time_period">Time Period</label> -->
<div class="custom-select custom-select-medium">
<select name="time_period" class="form-control ng-pristine ng-untouched ng-valid" id="time_period" ng-options="option.value as option.label for option in timePeriodOptions" ng-model="fundFilter.rateOfReturn.timePeriod" ng-change="timePeriodChange()"><option value="0" selected="selected" label="Select">Select</option><option value="1" label="One Year">One Year</option><option value="2" label="Five Year">Five Year</option><option value="3" label="Ten Year">Ten Year</option></select>
</div>
</div>
<!-- ngIf: fundFilter.rateOfReturn.timePeriod !== 'Select' -->
</div>
<hr>
<div class="form-group filter-rate-of-return">
<label class="alternative-label">Gross Expense Ratio</label>
<div class="form-inline double-slider-labels">
<span class="pull-left ng-binding">2.00%</span>
<span class="pull-right ng-binding">0.00%</span>
</div>
<div class="form-inline">
<section data-range-slider="" class="range-slider ng-isolate-scope ng-valid" ng-model="fundFilter.expenseRatio" min="expenseRatioMin" max="expenseRatioMax" step=".01" ng-change="expenseRatioChange()"><datalist id="numbers"><!-- ngRepeat: index in iter(max) --><option ng-repeat="index in iter(max)" class="ng-binding ng-scope" value="0">0</option><!-- end ngRepeat: index in iter(max) --></datalist><input list="numbers" type="range" ng-change="_which = 0" ng-model="_model[0]" min="2" max="0" step="0.01" class="ng-pristine ng-untouched ng-valid"><input type="range" ng-change="_which = 1" ng-model="_model[1]" min="2" max="0" step="0.01" class="ng-pristine ng-untouched ng-valid"></section>
</div>
</div>
<div class="form-group">
<a class="btn-link" ng-click="resetFundClick()">Reset changes</a>
<a class="btn btn-primary pull-right" ng-click="toggleFundFilter('fund-filter-close')">Close</a>
</div>
</div>
</div>
Select |
Investment |
Asset Class |
Details |
||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| AdviseMe! A | |||||||||||||||||||||||||||
| AdviseMe! MA | |||||||||||||||||||||||||||
| AdviseMe! M | |||||||||||||||||||||||||||
| AdviseMe! C | |||||||||||||||||||||||||||
| AdviseMe! VC | |||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
<div class="allocation-table-wrapper">
<fieldset>
<legend class="sr-only">Selected fund:</legend>
</fieldset><table class="table allocation-fund-table allocation-fund-table-expand-row" ng-class="{'allocation-fund-table-expand-row': targetYearFundCtrl.isState('modelPortfolio')}">
<colgroup>
<col class="col-md-1">
<col class="col-md-5">
<col class="col-md-4">
<col class="col-md-2">
</colgroup>
<thead>
<tr>
<th>
<h4 aria-label="Select a fund" tabindex="0" class="hidden-xs">Select</h4>
<i class="em-plus-bold visible-xs-block"></i>
</th>
<th>
<h4 class="pull-left">Investment</h4>
</th>
<th>
<!-- ngIf: targetYearFundCtrl.isState('modelPortfolio') && targetYearFundCtrl.selectedModel!==null --><h4 class="asset-class-title ng-scope" ng-if="targetYearFundCtrl.isState('modelPortfolio') && targetYearFundCtrl.selectedModel!==null">Asset Class</h4><!-- end ngIf: targetYearFundCtrl.isState('modelPortfolio') && targetYearFundCtrl.selectedModel!==null -->
</th>
<th>
<h4 ng-class="{ 'invisible' : (targetYearFundCtrl.isState('modelPortfolio') && targetYearFundCtrl.selectedModel===null), 'text-right' : targetYearFundCtrl.isState('modelPortfolio'), 'text-center' : !targetYearFundCtrl.isState('modelPortfolio')}" class="text-right">Details</h4>
</th>
</tr>
</thead>
<tbody class="allocation-current-funds" ng-class="{'allocation-target-year-table': targetYearFundCtrl.isState('targetYearFund')}">
<!-- ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index -->
<!-- Model portfolio view -->
<!-- ngRepeat: (key, modelPortfolio) in targetYearFundCtrl.assetModels --><!-- ngIf: targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="targetYearFundCtrl.isState('modelPortfolio')" ng-repeat-start="(key, modelPortfolio) in targetYearFundCtrl.assetModels" class="allocation-model-header ng-scope allocation-model-active" ng-class="{'allocation-model-active':targetYearFundCtrl.selectedModel==modelPortfolio}">
<td>
<label class="sr-only ng-binding">AdviseMe! A</label>
<input tabindex="0" class="allocation-radio-button ng-valid ng-dirty ng-valid-parse ng-touched" ng-model="targetYearFundCtrl.selectedModel" ng-value="modelPortfolio" type="radio" name="selectedModel" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="3">
AdviseMe! A
</td>
</tr><!-- end ngIf: targetYearFundCtrl.isState('modelPortfolio') -->
<tr ng-repeat-end="" ng-class="{'allocation-model-active-row':targetYearFundCtrl.selectedModel==modelPortfolio, 'allocation-model-inactive-row':targetYearFundCtrl.selectedModel!==modelPortfolio}" class="ng-scope allocation-model-active-row">
<td></td>
<td colspan="3">
<div class="allocation-model-funds collapse in" collapse="targetYearFundCtrl.selectedModel!==modelPortfolio" style="height: auto;">
<table class="table allocation-fund-table">
<colgroup>
<col class="col-md-1">
<col class="col-md-4">
<col class="col-md-4">
<col class="col-md-2">
</colgroup>
<tbody><!-- ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">10%</td>
<td class="ng-binding">PIMCO Income Instl</td>
<td class="ng-binding">Bond Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">15%</td>
<td class="ng-binding">Dodge & Cox International Stock</td>
<td class="ng-binding">International Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">55%</td>
<td class="ng-binding">Vanguard US Value</td>
<td class="ng-binding">Large Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">20%</td>
<td class="ng-binding">Vanguard Strategic Equity Inv</td>
<td class="ng-binding">Mid Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage -->
</tbody></table>
</div>
</td>
</tr><!-- end ngRepeat: (key, modelPortfolio) in targetYearFundCtrl.assetModels --><!-- ngIf: targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="targetYearFundCtrl.isState('modelPortfolio')" ng-repeat-start="(key, modelPortfolio) in targetYearFundCtrl.assetModels" class="allocation-model-header ng-scope" ng-class="{'allocation-model-active':targetYearFundCtrl.selectedModel==modelPortfolio}">
<td>
<label class="sr-only ng-binding">AdviseMe! MA</label>
<input tabindex="0" class="allocation-radio-button ng-pristine ng-untouched ng-valid" ng-model="targetYearFundCtrl.selectedModel" ng-value="modelPortfolio" type="radio" name="selectedModel" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="3">
AdviseMe! MA
</td>
</tr><!-- end ngIf: targetYearFundCtrl.isState('modelPortfolio') -->
<tr ng-repeat-end="" ng-class="{'allocation-model-active-row':targetYearFundCtrl.selectedModel==modelPortfolio, 'allocation-model-inactive-row':targetYearFundCtrl.selectedModel!==modelPortfolio}" class="ng-scope allocation-model-inactive-row">
<td></td>
<td colspan="3">
<div class="allocation-model-funds collapse" collapse="targetYearFundCtrl.selectedModel!==modelPortfolio" style="height: 0px;">
<table class="table allocation-fund-table">
<colgroup>
<col class="col-md-1">
<col class="col-md-4">
<col class="col-md-4">
<col class="col-md-2">
</colgroup>
<tbody><!-- ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">20%</td>
<td class="ng-binding">PIMCO Income Instl</td>
<td class="ng-binding">Bond Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">50%</td>
<td class="ng-binding">Vanguard US Value</td>
<td class="ng-binding">Large Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">17%</td>
<td class="ng-binding">Vanguard Strategic Equity Inv</td>
<td class="ng-binding">Mid Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">13%</td>
<td class="ng-binding">Dodge & Cox International Stock</td>
<td class="ng-binding">International Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage -->
</tbody></table>
</div>
</td>
</tr><!-- end ngRepeat: (key, modelPortfolio) in targetYearFundCtrl.assetModels --><!-- ngIf: targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="targetYearFundCtrl.isState('modelPortfolio')" ng-repeat-start="(key, modelPortfolio) in targetYearFundCtrl.assetModels" class="allocation-model-header ng-scope" ng-class="{'allocation-model-active':targetYearFundCtrl.selectedModel==modelPortfolio}">
<td>
<label class="sr-only ng-binding">AdviseMe! M</label>
<input tabindex="0" class="allocation-radio-button ng-pristine ng-untouched ng-valid" ng-model="targetYearFundCtrl.selectedModel" ng-value="modelPortfolio" type="radio" name="selectedModel" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="3">
AdviseMe! M
</td>
</tr><!-- end ngIf: targetYearFundCtrl.isState('modelPortfolio') -->
<tr ng-repeat-end="" ng-class="{'allocation-model-active-row':targetYearFundCtrl.selectedModel==modelPortfolio, 'allocation-model-inactive-row':targetYearFundCtrl.selectedModel!==modelPortfolio}" class="ng-scope allocation-model-inactive-row">
<td></td>
<td colspan="3">
<div class="allocation-model-funds collapse" collapse="targetYearFundCtrl.selectedModel!==modelPortfolio" style="height: 0px;">
<table class="table allocation-fund-table">
<colgroup>
<col class="col-md-1">
<col class="col-md-4">
<col class="col-md-4">
<col class="col-md-2">
</colgroup>
<tbody><!-- ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">8%</td>
<td class="ng-binding">Dodge & Cox International Stock</td>
<td class="ng-binding">International Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">40%</td>
<td class="ng-binding">Vanguard US Value</td>
<td class="ng-binding">Large Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">40%</td>
<td class="ng-binding">PIMCO Income Instl</td>
<td class="ng-binding">Bond Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">12%</td>
<td class="ng-binding">Vanguard Strategic Equity Inv</td>
<td class="ng-binding">Mid Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage -->
</tbody></table>
</div>
</td>
</tr><!-- end ngRepeat: (key, modelPortfolio) in targetYearFundCtrl.assetModels --><!-- ngIf: targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="targetYearFundCtrl.isState('modelPortfolio')" ng-repeat-start="(key, modelPortfolio) in targetYearFundCtrl.assetModels" class="allocation-model-header ng-scope" ng-class="{'allocation-model-active':targetYearFundCtrl.selectedModel==modelPortfolio}">
<td>
<label class="sr-only ng-binding">AdviseMe! C</label>
<input tabindex="0" class="allocation-radio-button ng-pristine ng-untouched ng-valid" ng-model="targetYearFundCtrl.selectedModel" ng-value="modelPortfolio" type="radio" name="selectedModel" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="3">
AdviseMe! C
</td>
</tr><!-- end ngIf: targetYearFundCtrl.isState('modelPortfolio') -->
<tr ng-repeat-end="" ng-class="{'allocation-model-active-row':targetYearFundCtrl.selectedModel==modelPortfolio, 'allocation-model-inactive-row':targetYearFundCtrl.selectedModel!==modelPortfolio}" class="ng-scope allocation-model-inactive-row">
<td></td>
<td colspan="3">
<div class="allocation-model-funds collapse" collapse="targetYearFundCtrl.selectedModel!==modelPortfolio" style="height: 0px;">
<table class="table allocation-fund-table">
<colgroup>
<col class="col-md-1">
<col class="col-md-4">
<col class="col-md-4">
<col class="col-md-2">
</colgroup>
<tbody><!-- ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">3%</td>
<td class="ng-binding">Dodge & Cox International Stock</td>
<td class="ng-binding">International Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">5%</td>
<td class="ng-binding">DFA Inflation-Protected Securities I</td>
<td class="ng-binding">Bond Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">55%</td>
<td class="ng-binding">PIMCO Income Instl</td>
<td class="ng-binding">Bond Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">32%</td>
<td class="ng-binding">Vanguard US Value</td>
<td class="ng-binding">Large Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">5%</td>
<td class="ng-binding">Vanguard Strategic Equity Inv</td>
<td class="ng-binding">Mid Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage -->
</tbody></table>
</div>
</td>
</tr><!-- end ngRepeat: (key, modelPortfolio) in targetYearFundCtrl.assetModels --><!-- ngIf: targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="targetYearFundCtrl.isState('modelPortfolio')" ng-repeat-start="(key, modelPortfolio) in targetYearFundCtrl.assetModels" class="allocation-model-header ng-scope" ng-class="{'allocation-model-active':targetYearFundCtrl.selectedModel==modelPortfolio}">
<td>
<label class="sr-only ng-binding">AdviseMe! VC</label>
<input tabindex="0" class="allocation-radio-button ng-pristine ng-untouched ng-valid" ng-model="targetYearFundCtrl.selectedModel" ng-value="modelPortfolio" type="radio" name="selectedModel" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="3">
AdviseMe! VC
</td>
</tr><!-- end ngIf: targetYearFundCtrl.isState('modelPortfolio') -->
<tr ng-repeat-end="" ng-class="{'allocation-model-active-row':targetYearFundCtrl.selectedModel==modelPortfolio, 'allocation-model-inactive-row':targetYearFundCtrl.selectedModel!==modelPortfolio}" class="ng-scope allocation-model-inactive-row">
<td></td>
<td colspan="3">
<div class="allocation-model-funds collapse" collapse="targetYearFundCtrl.selectedModel!==modelPortfolio" style="height: 0px;">
<table class="table allocation-fund-table">
<colgroup>
<col class="col-md-1">
<col class="col-md-4">
<col class="col-md-4">
<col class="col-md-2">
</colgroup>
<tbody><!-- ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">5%</td>
<td class="ng-binding">Key Guaranteed Portfolio Fund</td>
<td class="ng-binding">Fixed</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">2%</td>
<td class="ng-binding">Dodge & Cox International Stock</td>
<td class="ng-binding">International Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">3%</td>
<td class="ng-binding">Vanguard Strategic Equity Inv</td>
<td class="ng-binding">Mid Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">55%</td>
<td class="ng-binding">PIMCO Income Instl</td>
<td class="ng-binding">Bond Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">25%</td>
<td class="ng-binding">Vanguard US Value</td>
<td class="ng-binding">Large Cap Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage --><tr ng-repeat="(key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage" class="ng-scope">
<td class="ng-binding">10%</td>
<td class="ng-binding">DFA Inflation-Protected Securities I</td>
<td class="ng-binding">Bond Funds</td>
<td>
<!-- <a
tabindex="0"
class="btn btn-default with-gradient no-underline"
ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="" target="_blank">Details</a>
</td>
</tr><!-- end ngRepeat: (key, fund) in modelPortfolio.assetAllocModelDetailDTOs | filter:percentage -->
</tbody></table>
</div>
</td>
</tr><!-- end ngRepeat: (key, modelPortfolio) in targetYearFundCtrl.assetModels -->
</tbody>
</table>
</div>| Build Your Own Portfolio | |
|---|---|
| Really Coolness | 70% |
| Super Cool Fund | 20% |
| Rad Coolness | 10% |
| Build Your Own Portfolio | |
|---|---|
| Super Cool Fund | 50% |
| Rad Coolness | 50% |
<div class="row allocation-content ng-scope" ng-if="!reviewChangesCtrl.hasError && !reviewChangesCtrl.getDataLoaded() && !reviewChangewCtrl.isLoading">
<div class="fund-tables-wrapper">
<!-- ngIf: originalFundsExist() && !isEnrollmentFlow() --><div class="col-md-5 fund-list-wrapper ng-scope" ng-if="originalFundsExist() && !isEnrollmentFlow()">
<div class="fund-list-container" id="old-fund-container">
<header>
<h3>From</h3>
</header>
<div class="allocation-table-wrapper">
<table>
<tbody><tr>
<th colspan="2" class="ng-binding">Build Your Own Portfolio</th>
</tr>
<!-- ngRepeat: fund in originalFunds track by $index --><tr ng-repeat="fund in originalFunds track by $index" class="ng-scope">
<!-- ngIf: fund.overviewUrl -->
<!-- ngIf: !fund.overviewUrl --><td ng-if="!fund.overviewUrl" class="ng-binding ng-scope">Really Coolness</td><!-- end ngIf: !fund.overviewUrl -->
<td class="pull-right ng-binding">70%</td>
</tr><!-- end ngRepeat: fund in originalFunds track by $index --><tr ng-repeat="fund in originalFunds track by $index" class="ng-scope">
<!-- ngIf: fund.overviewUrl --><td ng-if="fund.overviewUrl" class="ng-scope">
<a ng-href="http://google.com" target="_blank" class="ng-binding" href="http://google.com">Super Cool Fund</a>
</td><!-- end ngIf: fund.overviewUrl -->
<!-- ngIf: !fund.overviewUrl -->
<td class="pull-right ng-binding">20%</td>
</tr><!-- end ngRepeat: fund in originalFunds track by $index --><tr ng-repeat="fund in originalFunds track by $index" class="ng-scope">
<!-- ngIf: fund.overviewUrl -->
<!-- ngIf: !fund.overviewUrl --><td ng-if="!fund.overviewUrl" class="ng-binding ng-scope">Rad Coolness</td><!-- end ngIf: !fund.overviewUrl -->
<td class="pull-right ng-binding">10%</td>
</tr><!-- end ngRepeat: fund in originalFunds track by $index -->
</tbody></table>
</div><!--//allocation-table-wrapper//-->
</div><!--//fund-list-container//-->
</div><!-- end ngIf: originalFundsExist() && !isEnrollmentFlow() -->
<!-- ngIf: originalFundsExist() && !isEnrollmentFlow() --><div class="col-md-2 arrow-parent ng-scope" ng-if="originalFundsExist() && !isEnrollmentFlow()">
<i class="fa fa-long-arrow-right allocation-arrow visible-md-block visible-lg-block"></i>
<span class="em-next-bold allocation-arrow hidden-md hidden-lg"></span>
</div><!-- end ngIf: originalFundsExist() && !isEnrollmentFlow() -->
<div class="fund-list-wrapper col-md-5" ng-class="{'allocation-centered-column': !originalFundsExist(), 'col-md-5': originalFundsExist() && !isEnrollmentFlow(), 'col-md-12': !originalFundsExist() || isEnrollmentFlow()}">
<div class="fund-list-container" id="new-fund-container">
<header>
<!-- ngIf: originalFundsExist() && !isEnrollmentFlow() --><h3 ng-if="originalFundsExist() && !isEnrollmentFlow()" class="ng-scope">To</h3><!-- end ngIf: originalFundsExist() && !isEnrollmentFlow() -->
<!-- ngIf: !originalFundsExist() || isEnrollmentFlow() -->
</header>
<div class="allocation-table-wrapper">
<table>
<tbody><tr>
<th colspan="2" class="ng-binding">Build Your Own Portfolio</th>
</tr>
<!-- ngIf: selectedAssetModel() -->
<!-- ngIf: selectedAssetModel() -->
<!-- ngRepeat: fund in currentFunds | filter : positiveAllocationFilter track by $index --><!-- ngIf: !selectedAssetModel() --><tr ng-if="!selectedAssetModel()" ng-repeat="fund in currentFunds | filter : positiveAllocationFilter track by $index" class="ng-scope">
<!-- ngIf: fund.overviewUrl --><td ng-if="fund.overviewUrl" class="ng-scope"><a ng-href="http://google.com" target="_blank" class="ng-binding" href="http://google.com">Super Cool Fund</a></td><!-- end ngIf: fund.overviewUrl -->
<!-- ngIf: !fund.overviewUrl -->
<td class="pull-right ng-binding">50%</td>
</tr><!-- end ngIf: !selectedAssetModel() --><!-- end ngRepeat: fund in currentFunds | filter : positiveAllocationFilter track by $index --><!-- ngIf: !selectedAssetModel() --><tr ng-if="!selectedAssetModel()" ng-repeat="fund in currentFunds | filter : positiveAllocationFilter track by $index" class="ng-scope">
<!-- ngIf: fund.overviewUrl -->
<!-- ngIf: !fund.overviewUrl --><td ng-if="!fund.overviewUrl" class="ng-binding ng-scope">Rad Coolness</td><!-- end ngIf: !fund.overviewUrl -->
<td class="pull-right ng-binding">50%</td>
</tr><!-- end ngIf: !selectedAssetModel() --><!-- end ngRepeat: fund in currentFunds | filter : positiveAllocationFilter track by $index -->
</tbody></table>
</div><!--//allocation-table-wrapper//-->
</div><!--//fund-list-container//-->
</div>
</div>
</div>
Select |
Investment |
Details |
|
|---|---|---|---|
| Russell LifePoints 2040 Strategy R5 | Details | ||
| Russell LifePoints 2030 Strategy R5 | Details | ||
| Great-West SF Lifetime 2030 Trust | Details | ||
| Great-West SF Lifetime 2025 Trust | Details | ||
| Great-West SF Lifetime 2020 Trust | Details | ||
| Russell LifePoints 2020 Strategy R5 | Details | ||
| Great-West SF Lifetime 2015 Trust | Details | ||
<div class="allocation-table-wrapper">
<fieldset>
<legend class="sr-only">Selected fund:</legend>
</fieldset><table class="table allocation-fund-table" ng-class="{'allocation-fund-table-expand-row': targetYearFundCtrl.isState('modelPortfolio')}">
<colgroup>
<col class="col-md-1">
<col class="col-md-5">
<col class="col-md-4">
<col class="col-md-2">
</colgroup>
<thead>
<tr>
<th>
<h4 aria-label="Select a fund" tabindex="0" class="hidden-xs">Select</h4>
<i class="em-plus-bold visible-xs-block"></i>
</th>
<th>
<h4 class="pull-left">Investment</h4>
</th>
<th>
<!-- ngIf: targetYearFundCtrl.isState('modelPortfolio') && targetYearFundCtrl.selectedModel!==null -->
</th>
<th>
<h4 ng-class="{ 'invisible' : (targetYearFundCtrl.isState('modelPortfolio') && targetYearFundCtrl.selectedModel===null), 'text-right' : targetYearFundCtrl.isState('modelPortfolio'), 'text-center' : !targetYearFundCtrl.isState('modelPortfolio')}" class="text-center">Details</h4>
</th>
</tr>
</thead>
<tbody class="allocation-current-funds allocation-target-year-table" ng-class="{'allocation-target-year-table': targetYearFundCtrl.isState('targetYearFund')}">
<!-- ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="!targetYearFundCtrl.isState('modelPortfolio')" ng-repeat="(key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index" ng-class="{'allocation-recommended-fund' : targetYearFundCtrl.isRecommendedFund(fund), 'allocation-next-recommended-fund' : targetYearFundCtrl.isNextRecommendedFund(fund)}" class="ng-scope">
<td>
<label for="fund-radio-0" class="sr-only ng-binding">Russell LifePoints 2040 Strategy R5</label>
<input tabindex="0" id="fund-radio-0" class="allocation-radio-button ng-pristine ng-untouched ng-valid" type="radio" name="selectedFund" ng-model="targetYearFundCtrl.selectedFund" ng-value="fund" ng-click="targetYearFundCtrl.fundSelectClick(fund)" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="2">
Russell LifePoints 2040 Strategy R5<!-- ngIf: targetYearFundCtrl.currentTargetOrRiskFund(fund) -->
</td>
<td>
<!-- <a tabindex="0" class="btn btn-default with-gradient right-margin-20 no-underline" ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Details</a>
</td>
</tr><!-- end ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="!targetYearFundCtrl.isState('modelPortfolio')" ng-repeat="(key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index" ng-class="{'allocation-recommended-fund' : targetYearFundCtrl.isRecommendedFund(fund), 'allocation-next-recommended-fund' : targetYearFundCtrl.isNextRecommendedFund(fund)}" class="ng-scope">
<td>
<label for="fund-radio-1" class="sr-only ng-binding">Russell LifePoints 2030 Strategy R5</label>
<input tabindex="0" id="fund-radio-1" class="allocation-radio-button ng-pristine ng-untouched ng-valid" type="radio" name="selectedFund" ng-model="targetYearFundCtrl.selectedFund" ng-value="fund" ng-click="targetYearFundCtrl.fundSelectClick(fund)" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="2">
Russell LifePoints 2030 Strategy R5<!-- ngIf: targetYearFundCtrl.currentTargetOrRiskFund(fund) -->
</td>
<td>
<!-- <a tabindex="0" class="btn btn-default with-gradient right-margin-20 no-underline" ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Details</a>
</td>
</tr><!-- end ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="!targetYearFundCtrl.isState('modelPortfolio')" ng-repeat="(key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index" ng-class="{'allocation-recommended-fund' : targetYearFundCtrl.isRecommendedFund(fund), 'allocation-next-recommended-fund' : targetYearFundCtrl.isNextRecommendedFund(fund)}" class="ng-scope">
<td>
<label for="fund-radio-2" class="sr-only ng-binding">Great-West SF Lifetime 2030 Trust</label>
<input tabindex="0" id="fund-radio-2" class="allocation-radio-button ng-pristine ng-untouched ng-valid" type="radio" name="selectedFund" ng-model="targetYearFundCtrl.selectedFund" ng-value="fund" ng-click="targetYearFundCtrl.fundSelectClick(fund)" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="2">
Great-West SF Lifetime 2030 Trust<!-- ngIf: targetYearFundCtrl.currentTargetOrRiskFund(fund) -->
</td>
<td>
<!-- <a tabindex="0" class="btn btn-default with-gradient right-margin-20 no-underline" ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Details</a>
</td>
</tr><!-- end ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="!targetYearFundCtrl.isState('modelPortfolio')" ng-repeat="(key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index" ng-class="{'allocation-recommended-fund' : targetYearFundCtrl.isRecommendedFund(fund), 'allocation-next-recommended-fund' : targetYearFundCtrl.isNextRecommendedFund(fund)}" class="ng-scope allocation-next-recommended-fund">
<td>
<label for="fund-radio-3" class="sr-only ng-binding">Great-West SF Lifetime 2025 Trust</label>
<input tabindex="0" id="fund-radio-3" class="allocation-radio-button ng-pristine ng-untouched ng-valid" type="radio" name="selectedFund" ng-model="targetYearFundCtrl.selectedFund" ng-value="fund" ng-click="targetYearFundCtrl.fundSelectClick(fund)" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="2">
Great-West SF Lifetime 2025 Trust<!-- ngIf: targetYearFundCtrl.currentTargetOrRiskFund(fund) -->
</td>
<td>
<!-- <a tabindex="0" class="btn btn-default with-gradient right-margin-20 no-underline" ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Details</a>
</td>
</tr><!-- end ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="!targetYearFundCtrl.isState('modelPortfolio')" ng-repeat="(key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index" ng-class="{'allocation-recommended-fund' : targetYearFundCtrl.isRecommendedFund(fund), 'allocation-next-recommended-fund' : targetYearFundCtrl.isNextRecommendedFund(fund)}" class="ng-scope allocation-recommended-fund">
<td>
<label for="fund-radio-4" class="sr-only ng-binding">Great-West SF Lifetime 2020 Trust</label>
<input tabindex="0" id="fund-radio-4" class="allocation-radio-button ng-pristine ng-untouched ng-valid" type="radio" name="selectedFund" ng-model="targetYearFundCtrl.selectedFund" ng-value="fund" ng-click="targetYearFundCtrl.fundSelectClick(fund)" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="2">
Great-West SF Lifetime 2020 Trust<!-- ngIf: targetYearFundCtrl.currentTargetOrRiskFund(fund) -->
</td>
<td>
<!-- <a tabindex="0" class="btn btn-default with-gradient right-margin-20 no-underline" ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Details</a>
</td>
</tr><!-- end ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="!targetYearFundCtrl.isState('modelPortfolio')" ng-repeat="(key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index" ng-class="{'allocation-recommended-fund' : targetYearFundCtrl.isRecommendedFund(fund), 'allocation-next-recommended-fund' : targetYearFundCtrl.isNextRecommendedFund(fund)}" class="ng-scope allocation-recommended-fund">
<td>
<label for="fund-radio-5" class="sr-only ng-binding">Russell LifePoints 2020 Strategy R5</label>
<input tabindex="0" id="fund-radio-5" class="allocation-radio-button ng-pristine ng-untouched ng-valid" type="radio" name="selectedFund" ng-model="targetYearFundCtrl.selectedFund" ng-value="fund" ng-click="targetYearFundCtrl.fundSelectClick(fund)" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="2">
Russell LifePoints 2020 Strategy R5<!-- ngIf: targetYearFundCtrl.currentTargetOrRiskFund(fund) -->
</td>
<td>
<!-- <a tabindex="0" class="btn btn-default with-gradient right-margin-20 no-underline" ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Details</a>
</td>
</tr><!-- end ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index --><!-- ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><tr ng-if="!targetYearFundCtrl.isState('modelPortfolio')" ng-repeat="(key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index" ng-class="{'allocation-recommended-fund' : targetYearFundCtrl.isRecommendedFund(fund), 'allocation-next-recommended-fund' : targetYearFundCtrl.isNextRecommendedFund(fund)}" class="ng-scope allocation-next-recommended-fund">
<td>
<label for="fund-radio-6" class="sr-only ng-binding">Great-West SF Lifetime 2015 Trust</label>
<input tabindex="0" id="fund-radio-6" class="allocation-radio-button ng-pristine ng-untouched ng-valid" type="radio" name="selectedFund" ng-model="targetYearFundCtrl.selectedFund" ng-value="fund" ng-click="targetYearFundCtrl.fundSelectClick(fund)" value="[object Object]">
</td>
<td class="allocation-fund-name-container ng-binding" colspan="2">
Great-West SF Lifetime 2015 Trust<!-- ngIf: targetYearFundCtrl.currentTargetOrRiskFund(fund) -->
</td>
<td>
<!-- <a tabindex="0" class="btn btn-default with-gradient right-margin-20 no-underline" ng-click="targetYearFundCtrl.openModal('fund-detail', fund)">Details</a> -->
<a tabindex="0" class="btn btn-default with-gradient no-underline" ng-href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244" target="_blank" href="https://docs.retirementpartner.com/fundov/FUNDOV_ISIS_SFBLG_ALL_ALL.PDF?time=20150512111244">Details</a>
</td>
</tr><!-- end ngIf: !targetYearFundCtrl.isState('modelPortfolio') --><!-- end ngRepeat: (key, fund) in targetYearFundCtrl.getFunds() | orderBy: '-targetYear' track by $index -->
<!-- Model portfolio view -->
<!-- ngRepeat: (key, modelPortfolio) in targetYearFundCtrl.assetModels -->
</tbody>
</table>
</div><div class="allocation-filter-container clearfix">
<div class="allocation-filter-controls">
<div class="allocation-ms-asofdate-container">Viewing: Rate of Return <!-- ngIf: morningStarAsOfDate --></div>
<div ng-click="toggleFundFilter('filter-open')" class="allocation-filter">
Filter <i class="fa fa-bars"></i>
</div>
</div>
</div><header ng-if="isStandalone" class="confirmation-header">
<button type="button"
class="btn-link btn-print fa fa-print pull-right no-right-padding"
print-section>
Print
</button>
<h1>Confirmation</h1>
</header>A confirmation success message would go here.
Your confirmation number is 1111111.
Your marital status is married.
Please keep this record number. It will be necessary for all inquiries regarding this transaction.
<div class="confirmation-body">
<p><i class="em-checkbox-icon"></i> A confirmation success message would go here.</p>
<p>
Your confirmation number is <strong>1111111</strong>.<br />
Your marital status is <strong>married</strong>.
</p>
<p>Please keep this record number. It will be necessary for all inquiries regarding this transaction.</p>
</div>| Name | Bob Jones |
|---|---|
| Allocation | 100% |
<div class="confirmation-details">
<div class="details-section">
<table class="table-details">
<tbody>
<tr>
<th>Name</th>
<td>Bob Jones</td>
</tr>
<tr>
<th>Allocation</th>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
</div>| Name: | Jane Anne Smith, PHD |
|---|---|
| Allocation: | 100% |
| Relationship: | My Spouse |
| SSN (last four): | 6789 |
| Date of birth: | 01/01/1981 |
| Phone number: | (123) 456-7890 |
| Address: | 205 West Fifth Street
Apt 1902 Overland Park, Kansas, United States, 12345 |
| Name: | Mary Louise Smith |
|---|---|
| Allocation: | 60% |
| Relationship: | My Child |
| SSN (last four): | 7878 |
| Date of birth: | 08/21/2002 |
| Address: | 205 West Fifth Street
Apt 1902 Overland Park, Kansas, United States, 12345 |
| Name: | Gil John Smith |
|---|---|
| Allocation: | 40% |
| Relationship: | My Child |
| SSN (last four): | 8989 |
| Date of birth: | 03/22/2008 |
| Address: | 205 West Fifth Street
Apt 1902 Overland Park, Kansas, United States, 12345 |
<div class="confirmation-details">
<div class="confirmation-details-group">
<h2>Primary Beneficiaries</h2>
<div class="details-section">
<!-- ngRepeat: beneficiary in data.beneficiaries.Primary -->
<div class="table-details ng-scope" ng-repeat="beneficiary in data.beneficiaries.Primary">
<table>
<tbody>
<tr>
<th>Name:</th>
<td>Jane Anne Smith, PHD</td>
</tr>
<tr>
<th>Allocation:</th>
<td>100%</td>
</tr>
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual" class="ng-scope">
<th>Relationship:</th>
<td>My Spouse</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual -->
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber" class="ng-scope">
<th ng-bind-html="'confirmationPage.tableHeadings.socialSecurityNumber' | translate:vm.translate.socialSecurityNumber">
<abbr title="Social Security Number">SSN</abbr> (last four):</th>
<td>6789</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber -->
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth" class="ng-scope">
<th>Date of birth:</th>
<td>01/01/1981</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth -->
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.phoneNumber -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.phoneNumber" class="ng-scope">
<th>Phone number:</th>
<td>(123) 456-7890</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.phoneNumber -->
<!-- ngIf: beneficiary.address != null -->
<tr ng-if="beneficiary.address != null" class="ng-scope">
<th>Address:</th>
<td ng-bind-html="beneficiary.address | unsafe">205 West Fifth Street
<br>Apt 1902
<br>Overland Park, Kansas, United States, 12345</td>
</tr>
<!-- end ngIf: beneficiary.address != null -->
</tbody>
</table>
</div>
<!-- end ngRepeat: beneficiary in data.beneficiaries.Primary -->
</div>
</div>
<div class="confirmation-details-group" ng-show="data.beneficiaries.Contingent.length > 0">
<h2>Contingent Beneficiaries</h2>
<div class="details-section">
<!-- ngRepeat: beneficiary in data.beneficiaries.Contingent -->
<div class="table-details ng-scope" ng-repeat="beneficiary in data.beneficiaries.Contingent">
<table>
<tbody>
<tr>
<th>Name:</th>
<td>Mary Louise Smith</td>
</tr>
<tr>
<th>Allocation:</th>
<td>60%</td>
</tr>
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual" class="ng-scope">
<th>Relationship:</th>
<td class="col-sm-8 ng-binding">My Child</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual -->
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber" class="ng-scope">
<th ng-bind-html="'confirmationPage.tableHeadings.socialSecurityNumber' | translate:vm.translate.socialSecurityNumber">
<abbr title="Social Security Number">SSN</abbr> (last four):</th>
<td>7878</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber -->
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth" class="ng-scope">
<th>Date of birth:</th>
<td>08/21/2002</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth -->
<!-- ngIf: beneficiary.address != null -->
<tr ng-if="beneficiary.address != null" class="ng-scope">
<th>Address:</th>
<td ng-bind-html="beneficiary.address | unsafe">205 West Fifth Street
<br>Apt 1902
<br>Overland Park, Kansas, United States, 12345</td>
</tr>
<!-- end ngIf: beneficiary.address != null -->
</tbody>
</table>
</div>
<!-- end ngRepeat: beneficiary in data.beneficiaries.Contingent -->
<div class="table-details ng-scope" ng-repeat="beneficiary in data.beneficiaries.Contingent">
<table>
<tbody>
<tr>
<th>Name:</th>
<td>Gil John Smith</td>
</tr>
<tr>
<th>Allocation:</th>
<td>40%</td>
</tr>
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual" class="ng-scope">
<th>Relationship:</th>
<td class="col-sm-8 ng-binding">My Child</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual -->
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber" class="ng-scope">
<th ng-bind-html="'confirmationPage.tableHeadings.socialSecurityNumber' | translate:vm.translate.socialSecurityNumber">
<abbr title="Social Security Number">SSN</abbr> (last four):</th>
<td>8989</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.socialSecurityNumber -->
<!-- ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth -->
<tr ng-if="vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth" class="ng-scope">
<th>Date of birth:</th>
<td>03/22/2008</td>
</tr>
<!-- end ngIf: vm.getType(beneficiary) == beneficiaryTypeCodes.Individual && beneficiary.dateOfBirth -->
<!-- ngIf: beneficiary.address != null -->
<tr ng-if="beneficiary.address != null" class="ng-scope">
<th>Address:</th>
<td ng-bind-html="beneficiary.address | unsafe">205 West Fifth Street
<br>Apt 1902
<br>Overland Park, Kansas, United States, 12345</td>
</tr>
<!-- end ngIf: beneficiary.address != null -->
</tbody>
</table>
</div>
<!-- end ngRepeat: beneficiary in data.beneficiaries.Contingent -->
</div>
</div>
</div><div>
<div class="menu-item dropdown" dropdown="" role="menuitem">
<a class="menu-item-link dropdown-toggle" dropdown-toggle="" role="button" aria-haspopup="true" aria-expanded="false">Drop Down Menu <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu" role="menu">
<li><a class="menu-item-link" ng-href="#" target="_blank" href="#">Drop Down Item 1</a></li>
<li><a class="menu-item-link" ng-href="#" target="_blank" href="#">Drop Down Item 2</a></li>
<li><a class="menu-item-link" ng-href="#" target="_blank" href="#">Drop Down Item 3</a></li>
<li><a class="menu-item-link" ng-href="#" target="_blank" href="#">Drop Down Item 4</a></li>
<li><a class="menu-item-link" ng-href="#" target="_blank" href="#">Drop Down Item 5</a></li>
</ul>
<form class="hide ng-pristine ng-valid" id="SAMLFORMDNP" method="post" target="_blank"></form>
</div>
</div><div id="best-next-step" class="liat-bns" ng-show="!model.dataChanged()">
<h3><span class="best-next-step-icon"></span>Best next step</h3>
<ul class="trade-offs list-unstyled gray-check-list">
<li id="trade-off-1" class="hidden-sm hidden-xs">
Increase your contribution to <span>9%</span>.
<br>
<a href="#">Do it now</a>
</li>
</ul>
<h3>Company Match</h3>
<ul class="trade-offs list-unstyled gray-check-list">
<li id="trade-off-1" class="hidden-sm hidden-xs">
100% on the first 5%.
</li>
</ul>
</div>
<pw-slider
 add-new-option-label = ""
 conversionFactor = ""
editable-step = "5"
enabled = "canChange"
 getScreenSize = ""
    hasLabelPrefixSelect = ""
identifier = "investment-mix-slider"
increment = "5"
label = "Investment Mix"
    label-prefix = "Slider Sample:"
left-subtitle = "Equities"
max-decimals = 0
max-editable-entry = "100"
 max-message-value = ""
 max-value = "100"
message = "This is the tooltip"
 min-editable-value = "0"
 min-message-value = ""
 min-value = "0"
 on-prefix-change = ""
on-value-change="sliderChange()"
 prefix = ""
 reset-value-with-limits = ""
right-subtitle = "Bonds"
    selected-label-prefix = ""
 show-label-message = ""
show-message = "!canSubmit"
slider-id= "investmentMix"
    slider-value = "0"
suffix = "%"
 target-message = ""
target-value = ""
 title-link-label = ""
 title-link-url = ""
 title-message = ""
 title-message-list = ""
 tool-tip-class = ""
use-both-sides-of-value = "true"
></pw-slider>
<div id="slider">
<h3><span class="best-next-step-icon"></span>Slider</h3>
<pw-slider slider-id="contributionRateSlider" identifier="contributionRateSlider" slider-value="ctrl.newContributionRate" max-value="75" max-decimals="2" min-value="0" on-value-change="ctrl.contributionRateSliderChanged" increment="1" prefix="ctrl.getSliderPrefix()" suffix="ctrl.getSliderSuffix()" enabled="true" use-both-sides-of-value="false" class="ng-isolate-scope"><div class="sliderComponent noLabel" id="contributionRateSlider" ng-class="{'noLabel' : !showLabel, 'disabled': disabled()}">
<!-- ngIf: showLabel -->
<div class="sliderTrackAndThumb">
<div class="sliderTrackWrapper">
<div class="sliderTrack">
<!-- TODO: AG: The BNS message here is hard-coded. How should this work? -->
<!-- ngIf: showTargetValue() -->
<div class="sliderTrackFill" style="width: 15.2203%;">
<button class="sliderThumb" ng-class="{'atTargetValue' : sliderValue === targetValue}" ng-mouseenter="messageHoverComponent = true" ng-mouseleave="messageHoverComponent = false">
<div class="popoverMessageContainer ng-hide" ng-show="showMessage" ng-class="{'messageHover': messageHover()}">
<div class="popoverMessage ng-binding"> </div>
<div class="popoverMessageArrow arrowDown">
<div class="insideArrowDown"></div>
</div>
</div>
<div class="sliderThumbValue ng-binding"><span class="valueAndEnd"><span class="value ng-binding">10</span><span ng-show="false" class="ng-binding ng-hide">/90</span></span>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="sliderSubtitles">
<div class="leftSliderSubtitle ng-binding"> </div>
<div class="rightSliderSubtitle ng-binding"> </div>
</div>
</div>
</pw-slider>
</div>
<pre>
<pw-slider
 add-new-option-label = ""
 conversionFactor = ""
editable-step = "5"
enabled = "canChange"
 getScreenSize = ""
    hasLabelPrefixSelect = ""
identifier = "investment-mix-slider"
increment = "5"
label = "Investment Mix"
    label-prefix = "Slider Sample:"
left-subtitle = "Equities"
max-decimals = 0
max-editable-entry = "100"
 max-message-value = ""
 max-value = "100"
message = "This is the tooltip"
 min-editable-value = "0"
 min-message-value = ""
 min-value = "0"
 on-prefix-change = ""
on-value-change="sliderChange()"
 prefix = ""
 reset-value-with-limits = ""
right-subtitle = "Bonds"
    selected-label-prefix = ""
 show-label-message = ""
show-message = "!canSubmit"
slider-id= "investmentMix"
    slider-value = "0"
suffix = "%"
 target-message = ""
target-value = ""
 title-link-label = ""
 title-link-url = ""
 title-message = ""
 title-message-list = ""
 tool-tip-class = ""
use-both-sides-of-value = "true"
></pw-slider>
</pre><div id="trade-off-messaging">
<h3 class="hidden-sm hidden-xs">This change would result in:</h3>
<div class="review-changes hidden-sm hidden-xs">
<div><strong>Future:</strong></div>
<div class="review-changes-amount"><span class="green">+ <strong ng-bind-template="$146.27">$146.27</strong></span> / month more in retirement income.</div>
<br>
<div><strong>Today:</strong></div>
<div class="review-changes-amount"><span class="red">- <strong>$5.38</strong></span> / month less in employer match.</div>
<div class="review-changes-amount"><span>- <strong>$15.38</strong></span> / month of your pretax pay.</div>
</div>
<div class="text-right">
<a href="#" class="margin-right-200">Reset</a><!--
--><button type="button" class="btn btn-primary review-button" data-toggle="modal" data-target="#reviewChanges">Review Changes</button>
</div>
</div><div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>The Internal Revenue Service announced that for tax year 2015, the elective deferral (contribution) limit for employees who participate in a 401(k), 403(b), most 457 plans, and the federal government's Thrift Savings Plan is increased.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div><div id="progress-to-goal" class="active">
<div id="progress-to-goal-chart-modal" class="progress-modal modal-content in" aria-hidden="false">
<div class="modal-header clearfix">
<div class="modal-title">My goal is <span class="green"><span id="income-goal" class="bound-value ng-binding">$5,000</span> per <span ng-bind="period" class="ng-binding">month</span></span></div>
<div class="modal-subtitle">Modify my retirement income goal</div>
</div>
<div class="modal-body">
<form name="updateGoal" class="form-horizontal ng-pristine ng-valid ng-valid-pattern">
<div class="modal-well with-background">
<div class="form-group row salary-container" ng-class="{true: 'has-error'}[!updateGoal.todaysSalary.$valid]">
<label for="todaysSalary" class="col-xs-6 control-label">Current salary:</label>
<div class="col-xs-4">
<input type="text" id="total-salary" value="$6,666.67" class="form-control">
</div>
</div>
<div class="form-group row other-income-container" ng-class="{true: 'has-error'}[!updateGoal.otherIncome.$valid]" ng-show="hasOtherVariableCompensation">
<label for="otherIncome" class="col-xs-6 control-label">Other variable compensation:<br><em>(optional)</em></label>
<div class="col-xs-4">
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-valid-pattern" id="other-income" name="otherIncome" ng-model="updatedOtherVariableCompensation" ng-pattern="/^\$?\d+(,\d{3})*\.?[0-9]?[0-9]?$/" pw-currency="">
</div>
</div>
<div class="form-group row">
<label for="income-replacement" class="col-xs-6 control-label">Percentage of my current income I want in retirement:</label>
<div class="col-xs-4">
<div class="custom-select custom-select-medium form-control">
<select id="income-replacement" name="" label="" class="btn dropdown-toggle" length="10">
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75" selected="">75% (default)</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
<option value="125">125%</option>
<option value="150">150%</option>
<option value="200">200%</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label for="goal_probability" class="col-xs-6 control-label">Probability of success:</label>
<div class="col-xs-4">
<label class="radio-inline">
<input type="radio" name="goal_probability" id="goal_probability_1" value="80" ng-model="updatedProbilityOfSuccess" class="ng-pristine ng-untouched ng-valid">
80%
</label>
<label class="radio-inline">
<input type="radio" name="goal_probability" id="goal_probability_2" value="90" ng-model="updatedProbilityOfSuccess" class="ng-pristine ng-untouched ng-valid" checked="checked">
90%
</label>
</div>
</div>
</div>
<div class="pull-right">
<button class="btn btn-link btn-cancel" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary btn-save" ng-click="saveProgressModal()">Save</button>
</div>
<div class="form-inline with-buttons container">
<div class="form-group">
<label class="control-label with-right-margin">View:</label>
<div class="input-group">
<label class="radio-inline">
<input type="radio" name="active_salary_view" id="monthlyOption" value="month" ng-model="period" class="ng-pristine ng-untouched ng-valid" checked="checked">
Monthly
</label>
<label class="radio-inline">
<input type="radio" name="active_salary_view" id="yearlyOption" value="year" ng-model="period" class="ng-pristine ng-untouched ng-valid">
Yearly
</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div><div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header clearfix">
<div class="modal-title">My goal is <span id="income-goal" class="bound-value ng-binding">$5,000</span> per <span ng-bind="period" class="ng-binding">month</span></div>
<p>Modify my retirement income goal</p>
</div>
<div class="modal-body">
<form name="updateGoal" class="form-horizontal ng-pristine ng-valid ng-valid-pattern">
<div class="modal-well with-background">
<div class="form-group row salary-container" ng-class="{true: 'has-error'}[!updateGoal.todaysSalary.$valid]">
<label for="todaysSalary" class="col-xs-6 control-label">Today's base salary:</label>
<div class="col-xs-6">
<input type="text" id="total-salary" value="$6,666.67" class="form-control">
</div>
</div>
<div class="form-group row other-income-container" ng-class="{true: 'has-error'}[!updateGoal.otherIncome.$valid]" ng-show="hasOtherVariableCompensation">
<label for="otherIncome" class="col-xs-6 control-label">Other variable compensation:</label>
<div class="col-xs-6">
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-valid-pattern" id="other-income" name="otherIncome" ng-model="updatedOtherVariableCompensation" ng-pattern="/^\$?\d+(,\d{3})*\.?[0-9]?[0-9]?$/" pw-currency="">
</div>
</div>
<div class="form-group row">
<label for="income-replacement" class="col-xs-6 control-label long-label">Percentage of my current income I will need in retirement:</label>
<div class="col-xs-6">
<div class="custom-select custom-select-small form-control">
<select id="income-replacement" name="" label="" class="btn dropdown-toggle" length="10">
</select>
</div>
</div>
</div>
<div class="form-group row">
<label for="goal_probability" class="col-xs-6 control-label inline-label">Probability of success:</label>
<div class="col-xs-6">
<label class="radio-inline">
<input type="radio" name="goal_probability" id="goal_probability_1" value="80" ng-model="updatedProbilityOfSuccess" class="ng-pristine ng-untouched ng-valid">
80%
</label>
<label class="radio-inline">
<input type="radio" name="goal_probability" id="goal_probability_2" value="90" ng-model="updatedProbilityOfSuccess" class="ng-pristine ng-untouched ng-valid">
90%
</label>
</div>
</div>
</div>
<h3>Projection Settings</h3>
<div class="form-inline container">
<div class="form-group">
<label class="control-label inline-label with-right-margin">View:</label>
<div class="input-group">
<label class="radio-inline">
<input type="radio" name="active_salary_view" id="monthlyOption" value="month" ng-model="period" class="ng-pristine ng-untouched ng-valid">
Monthly
</label>
<label class="radio-inline">
<input type="radio" name="active_salary_view" id="yearlyOption" value="year" ng-model="period" class="ng-pristine ng-untouched ng-valid">
Yearly
</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-link btn-cancel" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary btn-save" ng-click="saveProgressModal()">Save</button>
</div>
</div>
</div>
</div><div class="inner-container with-padding with-gray-background with-bottom-margin account-overview">
<div class="row">
<div class="col-md-4">
<div class="overview-title">Total Balance</div>
<div class="overview-value"><span class="currency"><sup>$</sup>62,214.02</span></div>
<div class="overview-sub">as of 6/20/14</div>
</div>
<div class="col-md-4">
<div class="overview-title">Est. Retirement Income</div>
<div class="overview-value"><span class="currency"><sup>$</sup>4,160</span>/month</div>
<div class="overview-sub"><a href="#">View projection</a></div>
</div>
<div class="col-md-4">
<div class="overview-title">3 Year Rate of Return</div>
<div class="overview-value"><span class="currency">8.25%</div>
<div class="overview-sub">YTD: <span class="negative">-2.40%</span></div>
</div>
</div>
</div>$20.00 per pay period
The estimated amount to be deducted from your paycheck is based on the salary provided times your contribution rate.
<div class="panel panel-default">
<header class="panel-heading form-group" ng-class="{'inactive' : ctrl.model.contributionType != contributionTypes.CUSTOM}">
<label for="contributionTypeCustom" class="radio-inline panel-title collapsed" data-toggle="collapse" data-target="#anotherRate" aria-expanded="false" aria-controls="" data-parent="#contributionRate">
<input type="radio" name="contributionType" id="contributionTypeCustom" ng-value="contributionTypes.CUSTOM" ng-model="ctrl.model.contributionType" ng-click="ctrl.onSelOption()" class="ng-pristine ng-untouched ng-valid" value="2">
<strong class="ng-binding">Select another contribution rate</strong>
</label>
</header>
<div class="panel-body panel-collapse" id="anotherRate" ng-class="{'collapse' : ctrl.model.contributionType != contributionTypes.CUSTOM}">
<div class="panel-collapse-content">
<div class="row contribution-details">
<div class="col-sm-8 form-inline">
<div class="contribution-heading ng-binding" tooltip="Standard contributions are deducted from your paycheck. Contributions in the Standard group include Base Pay Traditional 401(k) and Base Pay Roth 401(k).">My Standard Contribution</div>
<div class="contribution-percentage change-percentage">
<strong><span class="editable-text ng-isolate-scope" model="ctrl.newContributionRate" name="contributionRate" prefix="" suffix="%" max-decimals="(ctrl.allowedDecimals)" range-id="contributionRateSlider" change="ctrl.contributionTextChanged(name,textValue)" can-edit="true" no-recalculate="" use-both-sides-of-value="false" slider-id="contributionRateSlider" on-value-change="ctrl.contributionTextChanged">
<span class="editable-text-trigger ng-binding" ng-class="spanClass" ng-click="startEditing()">
56%
</span>
<!-- Input popover -->
<div class="popover popover-input ng-hide" ng-class="{ dollar : prefix }" ng-show="editing" ng-disabled="!isEditable()">
<div class="arrow"></div>
<div class="popover-content form-inline ng-binding">
<input type="text" class="editable-text form-control ng-valid-required ng-valid-pattern" name="contributionRateSlider-text-edit" id="contributionRateSlider-text-edit" placeholder="" ng-model="model" ng-disabled="!isEditable()" ng-keyup="inputInputEvent($event)" ng-paste="inputInputEvent($event)" ng-change="inputInputEvent($event)" ng-keypress="inputKeypressEvent($event)" ng-focus="startEditing()" ng-blur="stopEditingWithBlur()" ng-pattern="/^\$?\d*(,\d{3})*\.?\d*$/" ng-required="isRequired()" input-class="editable-text form-control" input-id="contributionRateSlider-text-edit" model="editedModel" min-value="minValue" max-value="maxValue" max-decimals="maxDecimals" max-editable-entry="(maxEditableEntry)" submit-value="stopEditingWithValue" can-edit="true" step="step">
%
<button class="btn btn-primary reset-padding ng-binding" ng-disabled="!isEditable()">Done</button>
</div>
</div>
</span></strong>
</div>
<!-- ngIf: ctrl.showPerPaycheckValue() --><div ng-if="ctrl.showPerPaycheckValue()" class="contribution-amount ng-scope"><p class="ng-binding">$20.00 per pay period</p></div><!-- end ngIf: ctrl.showPerPaycheckValue() -->
<!-- ngIf: ctrl.showPerPaycheckNoValue() -->
<p class="small ng-binding">The estimated amount to be deducted from your paycheck is based on the salary provided times your contribution rate.</p>
<div ng-show="ctrl.model.currentDeferral.amountType.length > 1" class="btn-group ng-hide" data-toggle="buttons">
<!-- ngRepeat: amountType in ctrl.model.currentDeferral.amountType | orderBy:ctrl.amountTypeOrder --><label class="btn btn-toggle ng-pristine ng-untouched ng-valid ng-binding ng-scope active" ng-change="ctrl.amountTypeChanged()" ng-model="ctrl.newContributionRateType" btn-radio="amountType.code" ng-repeat="amountType in ctrl.model.currentDeferral.amountType | orderBy:ctrl.amountTypeOrder">
Percent
</label><!-- end ngRepeat: amountType in ctrl.model.currentDeferral.amountType | orderBy:ctrl.amountTypeOrder -->
</div>
<pw-slider slider-id="contributionRateSlider" identifier="contributionRateSlider" slider-value="ctrl.newContributionRate" max-value="75" max-decimals="2" min-value="0" on-value-change="ctrl.contributionRateSliderChanged" increment="1" prefix="ctrl.getSliderPrefix()" suffix="ctrl.getSliderSuffix()" enabled="true" use-both-sides-of-value="false" class="ng-isolate-scope"><div class="sliderComponent noLabel" id="contributionRateSlider" ng-class="{'noLabel' : !showLabel, 'disabled': disabled()}">
<!-- ngIf: showLabel -->
<div class="sliderTrackAndThumb">
<div class="sliderTrackWrapper">
<div class="sliderTrack">
<!-- TODO: AG: The BNS message here is hard-coded. How should this work? -->
<!-- ngIf: showTargetValue() -->
<div class="sliderTrackFill" style="width: 70.2203%;">
<button class="sliderThumb" ng-class="{'atTargetValue' : sliderValue === targetValue}" ng-mouseenter="messageHoverComponent = true" ng-mouseleave="messageHoverComponent = false">
<div class="popoverMessageContainer ng-hide" ng-show="showMessage" ng-class="{'messageHover': messageHover()}">
<div class="popoverMessage ng-binding"> </div>
<div class="popoverMessageArrow arrowDown">
<div class="insideArrowDown"></div>
</div>
</div>
<div class="sliderThumbValue ng-binding"><span class="valueAndEnd"><span class="value ng-binding">56</span><span ng-show="false" class="ng-binding ng-hide">%/19</span></span>%
</div>
</button>
</div>
</div>
</div>
</div>
<div class="sliderSubtitles">
<div class="leftSliderSubtitle ng-binding"> </div>
<div class="rightSliderSubtitle ng-binding"> </div>
</div>
</div>
</pw-slider>
<!-- ngIf: ctrl.fieldErrors.errorDetails.length > 0 -->
<!-- ngIf: ctrl.exceedsMaxValue -->
<!-- ngIf: ctrl.fieldWarnings.length > 0 -->
</div>
<!-- ngIf: ctrl.model.currentDeferral.companyMatchPercent --><div ng-if="ctrl.model.currentDeferral.companyMatchPercent" class="col-sm-4 contribution-numbers contribution-rightblock ng-scope">
<div class="contribution-heading ng-binding">Company Match</div>
<div class="contribution-percentage">
<strong class="ng-binding">6<sup>%</sup></strong></div>
<div class="contribution-amount ng-binding">
Apple 401(k) Plan matches up to
<!-- ngRepeat: matchDesc in ctrl.model.currentDeferral.listofCompanyMatchDescriptions track by $index --><li ng-repeat="matchDesc in ctrl.model.currentDeferral.listofCompanyMatchDescriptions track by $index" class="ng-binding ng-scope"> 100% on the first 6% for 5 years of service or more</li><!-- end ngRepeat: matchDesc in ctrl.model.currentDeferral.listofCompanyMatchDescriptions track by $index --><li ng-repeat="matchDesc in ctrl.model.currentDeferral.listofCompanyMatchDescriptions track by $index" class="ng-binding ng-scope"> 75% on the first 6% for 2 but less than 5 years of service,</li><!-- end ngRepeat: matchDesc in ctrl.model.currentDeferral.listofCompanyMatchDescriptions track by $index --><li ng-repeat="matchDesc in ctrl.model.currentDeferral.listofCompanyMatchDescriptions track by $index" class="ng-binding ng-scope"> 100% on the first 6% for 5 or more years of service.</li><!-- end ngRepeat: matchDesc in ctrl.model.currentDeferral.listofCompanyMatchDescriptions track by $index -->
</div>
</div><!-- end ngIf: ctrl.model.currentDeferral.companyMatchPercent -->
</div>
</div>
</div>
</div>Note: these panels won't collapse in styleguide due to lack of JS
.panel-group.panel .panel-defaultheader element with classes .panel-heading .form-grouplabel tag, with the classes radio-inline panel-title label is a radio input and either a strong or a span tag wrapping the title. This allows the custom radio styles to be applied.panel-body panel-collapsepanel-collapse-contentlabel has various data- attributes that allow us to control the panels.data-toggle="collapse" tells the pannel it should collapse and expanddata-target defines the panel body for the panel headerdata-parent defines the parent element for the group of panels.<h2>Panels</h2>
<p>Note: these panels won't collapse in styleguide due to lack of JS</p>
<h3>Markup</h3>
<ul>
<li>Panel container class is <code>.panel-group</code></li>
<li>Each panel is assigned classes of <code>.panel .panel-default</code></li>
<li>Panel header is wrapped in a <code>header</code> element with classes <code>.panel-heading .form-group</code></li>
<li>The title of the panel, is wrapped with a <code>label</code> tag, with the classes <code>radio-inline panel-title </code></li>
<li>Inside of the <code>label</code> is a <code>radio</code> input and either a <code>strong</code> or a <code>span</code> tag wrapping the title. This allows the custom radio styles to be applied.</li>
<li>Body of content wrapping div should be assigned classes of <code>panel-body panel-collapse</code></li>
<li>Inside of that will be a div that holds the body content. This has the class of <code>panel-collapse-content</code></li>
</ul>
<h3>Assignments</h3>
<ul>
<li>The <code>label</code> has various <code>data-</code> attributes that allow us to control the panels.</li>
<li><code>data-toggle="collapse"</code> tells the pannel it should collapse and expand</li>
<li><code>data-target</code> defines the panel body for the panel header</li>
<li><code>data-parent</code> defines the parent element for the group of panels.</li>
</ul>
<a href="http://getbootstrap.com/components/#panels">We’re using the bootstrap panel for more information</a>
<h3>Example</h3>
<div class="panel-group" id="contributionRate" >
<div class="panel panel-default">
<header class="panel-heading form-group">
<label class="radio-inline panel-title collapsed"
data-toggle="collapse"
data-target="#companyMatch"
aria-expanded="true"
aria-controls=""
data-parent="#contributionRate">
<input type="radio" >
<strong>Panel Title with Strong</strong>
</label>
</header>
<div class="panel-body panel-collapse"
id="companyMatch" >
<div class="panel-collapse-content">
Panel Content
</div>
</div>
</div>
<div class="panel panel-default">
<header class="panel-heading form-group">
<label class="radio-inline panel-title collapsed"
data-toggle="collapse"
data-target="#irsMax"
aria-expanded="false"
aria-controls=""
data-parent="#contributionRate">
<input type="radio" />
<span>Panel Title with Span</span>
</label>
</header>
<div class="panel-body panel-collapse"
id="irsMax" >
<div class="panel-collapse-content">
Panel Content
</div>
</div>
</div>
</div><div role="tabpanel" class="tabpanel tab-pane" id="healthCareCosts">
<div id="healthcare" healthcare="" class="infographic healthcare-paycheck" ng-controller="HealthCareCtrl as HealthCtrl">
<div class="infographic-overlay">
<header>
<div class="overlay-title">At age
<span ng-bind="healthModel.age" class="ng-binding">65</span> my estimated monthly health care costs will be
<span class="currency ng-binding" ng-bind="HealthCtrl.projectedCost | number: 0">838</span>
<span class="projected-health-care-costs-percent">(<span ng-bind="HealthCtrl.costPercent" class="ng-binding">22%</span> of my income)</span>
</div>
</header>
<div class="clearfix"></div>
<div class="projected-care-chart">
<div class="col-sm-3 text-center projected-health-care-costs">
<div id="projected-health-care-costs-chart" data-original-title="" title=""><svg height="140" version="1.1" width="140" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc>Created with Raphaël 2.1.0</desc><defs></defs><path fill="none" stroke="#ffffff" d="M70,70L140,70A70,70,0,0,0,133.8325731639478,41.27017919879675Z" stroke-width="0" style="" class="colorize-0"></path><path fill="none" stroke="#ffffff" d="M70,70L133.8325731639478,41.27017919879675A70,70,0,0,0,120.18055927188054,21.195169591921704Z" stroke-width="0" style="" class="colorize-1"></path><path fill="none" stroke="#ffffff" d="M70,70L120.18055927188054,21.195169591921704A70,70,0,0,0,101.73576351057437,7.607361697064803Z" stroke-width="0" style="" class="colorize-2"></path><path fill="none" stroke="#ffffff" d="M70,70L101.73576351057437,7.607361697064803A70,70,0,0,0,97.2272296570069,5.5121874676725895Z" stroke-width="0" style="" class="colorize-3"></path><path fill="none" stroke="#ffffff" d="M70,70L97.2272296570069,5.5121874676725895A70,70,0,0,0,96.37258716862077,5.157987029754395Z" stroke-width="0" style="" class="colorize-4"></path><path fill="none" stroke="#ffffff" d="M70,70L96.37258716862077,5.157987029754395A70,70,0,0,0,93.2369963952687,3.9693858992189206Z" stroke-width="0" style="" class="colorize-5"></path><path fill="none" stroke="#ffffff" d="M70,70L93.2369963952687,3.9693858992189206A70,70,0,0,0,85.68834190505187,1.7806777498472002Z" stroke-width="0" style="" class="colorize-6"></path><path fill="none" stroke="#ffffff" d="M70,70L85.68834190505187,1.7806777498472002A70,70,0,0,0,82.97190241893811,1.2124302825463502Z" stroke-width="0" style="" class="colorize-7"></path><path fill="none" stroke="#ffffff" d="M70,70L82.97190241893811,1.2124302825463502A70,70,0,1,0,140,70.00000000000001Z" stroke-width="0" style="" class="colorize-8"></path></svg><div id="projected-health-care-costs-income-label">$2,965.30</div></div>
<div class="svg-circle-shadow"></div>
<button class="btn-primary btn" ng-click="viewDetails = !viewDetails">Personalize</button>
</div>
<div class="col-sm-9 projected-health-care-table">
<div class="col-sm-6">
<table class="simple">
<thead>
<tr>
<th colspan="3"><small>Insurance Premiums</small></th>
</tr>
</thead>
<tbody>
<!-- ngRepeat: premium in HealthCtrl.premiums --><tr ng-repeat="premium in HealthCtrl.premiums" class="ng-scope">
<td class="legend-icon"><span class="fa fa-square colorize-0"></span></td>
<td ng-bind="premium.label" class="ng-binding">Doctors & Tests (Parts A & B)</td>
<td class="number ng-binding" ng-bind="premium.value | currency:'$':0">$256</td>
</tr><!-- end ngRepeat: premium in HealthCtrl.premiums --><tr ng-repeat="premium in HealthCtrl.premiums" class="ng-scope">
<td class="legend-icon"><span class="fa fa-square colorize-1"></span></td>
<td ng-bind="premium.label" class="ng-binding">Prescription Drugs (Part D)</td>
<td class="number ng-binding" ng-bind="premium.value | currency:'$':0">$211</td>
</tr><!-- end ngRepeat: premium in HealthCtrl.premiums --><tr ng-repeat="premium in HealthCtrl.premiums" class="ng-scope">
<td class="legend-icon"><span class="fa fa-square colorize-2"></span></td>
<td ng-bind="premium.label" class="ng-binding">Medical Supplemental</td>
<td class="number ng-binding" ng-bind="premium.value | currency:'$':0">$199</td>
</tr><!-- end ngRepeat: premium in HealthCtrl.premiums --><tr ng-repeat="premium in HealthCtrl.premiums" class="ng-scope">
<td class="legend-icon"><span class="fa fa-square colorize-3"></span></td>
<td ng-bind="premium.label" class="ng-binding">Dental Insurance</td>
<td class="number ng-binding" ng-bind="premium.value | currency:'$':0">$43</td>
</tr><!-- end ngRepeat: premium in HealthCtrl.premiums -->
</tbody>
</table>
</div>
<div class="col-sm-6">
<table class="simple">
<thead>
<tr>
<th colspan="3"><small>Additional out-of-pocket costs</small></th>
</tr>
</thead>
<tbody>
<!-- ngRepeat: otherCost in HealthCtrl.otherCosts --><tr ng-repeat="otherCost in HealthCtrl.otherCosts" class="ng-scope">
<td class="legend-icon"><span class="fa fa-square colorize-4"></span></td>
<td ng-bind="otherCost.label" class="ng-binding">Doctors & Tests</td>
<td class="number ng-binding" ng-bind="otherCost.value | currency:'$':0">$8</td>
</tr><!-- end ngRepeat: otherCost in HealthCtrl.otherCosts --><tr ng-repeat="otherCost in HealthCtrl.otherCosts" class="ng-scope">
<td class="legend-icon"><span class="fa fa-square colorize-5"></span></td>
<td ng-bind="otherCost.label" class="ng-binding">Prescription Drugs</td>
<td class="number ng-binding" ng-bind="otherCost.value | currency:'$':0">$29</td>
</tr><!-- end ngRepeat: otherCost in HealthCtrl.otherCosts --><tr ng-repeat="otherCost in HealthCtrl.otherCosts" class="ng-scope">
<td class="legend-icon"><span class="fa fa-square colorize-6"></span></td>
<td ng-bind="otherCost.label" class="ng-binding">Hearing & Vision</td>
<td class="number ng-binding" ng-bind="otherCost.value | currency:'$':0">$68</td>
</tr><!-- end ngRepeat: otherCost in HealthCtrl.otherCosts --><tr ng-repeat="otherCost in HealthCtrl.otherCosts" class="ng-scope">
<td class="legend-icon"><span class="fa fa-square colorize-7"></span></td>
<td ng-bind="otherCost.label" class="ng-binding">Dental</td>
<td class="number ng-binding" ng-bind="otherCost.value | currency:'$':0">$24</td>
</tr><!-- end ngRepeat: otherCost in HealthCtrl.otherCosts -->
</tbody>
</table>
</div>
<div class="clearfix"></div>
<label for="liat-health-age" class="healthcare-at-age-label">at age:</label>
<div class="range-slider-group">
<input id="liat-health-age" range-load="" integer="" ng-model="healthModel.age" min-value="model.sliders.retirementAgeMin" max-value="75" step="1" type="range" title="Select your current or planned age of retirement" data-rangeslider="" data-unit="age" class="ng-pristine ng-untouched ng-valid ng-isolate-scope" value="65" min="50" max="75">
<output class="range-tooltip" for="liat-health-age"></output>
</div>
</div>
</div>
</div>
<div class="healthcare-paycheck-detail-trigger show-details display-none arrow-link" ng-click="viewModel.paycheckDrawerToggle()">Show the details</div>
</div>
</div><div role="tabpanel" class="tabpanel tab-pane" id="howDoICompare">
<div class="infographic section-peer-comparison">
<div class="infographic-overlay">
<div class="section-peer-comparison-wrapper">
<header>
<div class="overlay-title">How do I compare to other people like me?</div>
<!--<div class="overlay-subtitle">Compare your retirement goals against others</div>-->
</header>
<table class="desktop-how-do-i-compare-table">
<tbody>
<tr>
<td></td>
<td class="target-my-peers">My Peers</td>
<td class="target-top-peers"><div class="ribbon" popover="Top Peers represents the top 90th percentile of your age, income, and gender demographic cohort." popover-title="Who are Top Peers?" popover-placement="left"><div class="ribbon-inner"><strong class="ribbon-content"><h2>Top Peers</h2></strong></div></div></td>
<td>Me</td>
</tr>
<tr>
<td class="comparison-controls">
<form action="#replace-with-service" method="post" class="ng-pristine ng-valid">
<div class="form-group row">
<label for="ageRange" class="col-sm-3 control-label">Age:</label>
<div class="col-sm-9">
<div class="custom-select custom-select-small">
<select name="ageRange" id="ageRange">
<option value="20 - 29">20 - 29</option>
<option selected="selected" value="30 - 39">30 - 39</option>
<option value="40 - 49">40 - 49</option>
<option value="50 - 59">50 - 59</option>
<option value="60-65">60-65</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label for="salaryRange" class="col-sm-3 control-label">Salary:</label>
<div class="col-sm-9">
<div class="custom-select custom-select-small">
<select name="salaryRange" id="salaryRange">
<option value="20k - 49k">20k - 49k</option>
<option selected="selected" value="50k - 75k">50k - 75k</option>
<option value="76k - 99k">76k - 99k</option>
<option value="100k - 125k">100k - 125k</option>
<option value="125k+">125k+</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label for="gender" class="col-sm-3 control-label">Gender:</label>
<div class="col-sm-9">
<div class="custom-select custom-select-small">
<select name="gender" id="gender">
<option selected="selected" value="Male">Male</option>
<option value="Female">Female</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
</div>
<!--<a href="#">View Details</a>-->
</form>
</td>
<td class="target-my-peers">
<div class="svg-container svg-my-peers" popover="My Peers represents the average person in your same age, income, and gender demographic cohort." popover-title="Who are My Peers?" popover-placement="top">
<svg width="105px" height="105px" viewBox="0 0 122 122" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Your peers are at 48% of their monthly retirement income goal.</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Oval-1-+-Oval-2-+-Oval-3" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)">
<circle id="Oval-1" stroke="rgb(234,234,234)" fill="rgb(234,234,234)" sketch:type="MSShapeGroup" cx="60" cy="58" r="53.8695652"></circle>
<circle id="Oval-2" stroke="#CCCCCC" stroke-width="4" fill="#525252" sketch:type="MSShapeGroup" cx="60" cy="60" r="50.8695652"></circle>
<path d="M73.5024987,109.05813 C95.0434253,103.142715 110.869565,83.419554 110.869565,60 C110.869565,31.9055149 88.0944851,9.13043478 60,9.13043478" id="Oval-3" stroke="rgb(232,148,0)" stroke-width="4" sketch:type="MSShapeGroup"></path>
<text x="50%" y="60" class="big" fill="rgb(255,255,255)">48%</text>
<text x="50%" y="80" fill="#999999">of goal</text>
</g>
</g>
</svg>
<div class="svg-circle-shadow"></div>
</div>
</td>
<td class="target-top-peers">
<div class="svg-container svg-top-peers" popover="Top Peers represents the top 90th percentile of your age, income, and gender demographic cohort." popover-title="Who are Top Peers?" popover-placement="top">
<svg width="105px" height="105px" viewBox="0 0 122 122" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="svg-top-peers">
<title>Your peers are at 94% of their monthly retirement income goal.</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Oval-1-+-Oval-2-+-Oval-3" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)">
<circle id="Oval-1" stroke="rgb(234,234,234)" fill="rgb(234,234,234)" sketch:type="MSShapeGroup" cx="60" cy="58" r="53.8695652"></circle>
<circle id="Oval-2" stroke="#CCCCCC" stroke-width="4" fill="#525252" sketch:type="MSShapeGroup" cx="60" cy="60" r="50.8695652"></circle>
<path d="M33.9989852,16.2683243 C19.1068415,25.1416551 9.13043478,41.4057702 9.13043478,60 C9.13043478,88.0944851 31.9055149,110.869565 60,110.869565 C88.0944851,110.869565 110.869565,88.0944851 110.869565,60 C110.869565,31.9055149 88.0944851,9.13043478 60,9.13043478" id="Oval-3" stroke="rgb(25,173,30)" stroke-width="4" sketch:type="MSShapeGroup"></path>
<text x="50%" y="60" class="big" fill="rgb(255,255,255)">94%</text>
<text x="50%" y="80" fill="#999999">of goal</text>
</g>
</g>
</svg>
<div class="svg-circle-shadow"></div>
</div>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<table class="secondary-how-do-i-compare-table">
<tbody>
<tr class="contribution-rates">
<td><strong>Contribution Rate:</strong></td>
<td>6%</td>
<td>15%</td>
<td>12%</td>
</tr>
<tr>
<td><strong>401(k) Balance:</strong></td>
<td>$35,000</td>
<td>$68,000</td>
<td>$43,266.64</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><div role="tabpanel" class="tabpanel tab-pane active" ng-class="{ active : getPaycheckTabs().retirementIncome.active }" id="projectedIncome">
<div id="paycheck" paycheck="" class="infographic">
<div class="infographic-overlay">
<header>
<h1 class="hidden-xs ng-binding">My Estimated Retirement Income</h1>
<h1 class="visible-xs-block ng-binding">Est. Retirement Income</h1>
</header>
<div class="payable-to">
<span class="participant-name-container hidden-xs">
<span class="participant-name-value ng-binding">Peyton Manning</span>
<span class="projected-income-label ng-binding ng-scope" ng-if="getIncomeGoal().term === 12">Estimated monthly income: </span>
</span>
<span class="projected-income" ng-click="clickProjectedIncome()">
<span class="projected-income-number currency animated-curency ng-binding" ng-bind-html="projectedIncome | currencyFilter : 0 | unsafe"><sup>$</sup>10,333</span>
<input type="hidden" class="hiddenCurrency" ng-value="total-income" value="0">
<span class="retirement-income-paycheck-detail-trigger show-details">
<span class="sr-only ng-binding">Show the details</span>
<span class="em-next-KO retirement-income-paycheck-detail-trigger-icon"></span>
</span>
</span>
</div>
</div>
<div id="paycheck-breakdown" class="infographic-breakdown">
<div class="fills">
<div class="breakdown-container paycheck-drawer-trigger ng-isolate-scope" ng-repeat="income in incomes" ng-id="income.id" label="My Savings" value="getIncomePart( { id: income.label } ).value" class-name="income.className" ng-if="showSegment( { id: income.label} )"
ng-click="segmentClick( { id: income.label } )" ng-style="{width: getPercent(income)}" style="width: 29.95%;">
<div class="paycheck-label-container">
<h5 class="paycheck-label ng-binding">My Savings</h5>
<h3 class="currency animated-curency ng-binding" ng-bind-html="value | currencyFilter : 0 | unsafe"><sup>$</sup>3,879</h3>
</div>
<input type="hidden" class="hiddenCurrency" ng-value="">
<div class="marker section-savings-marker"></div>
</div>
<div class="breakdown-container paycheck-drawer-trigger ng-isolate-scope" ng-repeat="income in incomes" ng-id="income.id" label="Employer Contributions" value="getIncomePart( { id: income.label } ).value" class-name="income.className" ng-if="showSegment( { id: income.label} )"
ng-click="segmentClick( { id: income.label } )" ng-style="{width: getPercent(income)}" style="width: 17.96%;">
<div class="paycheck-label-container">
<h5 class="paycheck-label ng-binding">Employer Contributions</h5>
<h3 class="currency animated-curency ng-binding" ng-bind-html="value | currencyFilter : 0 | unsafe"><sup>$</sup>2,326</h3>
</div>
<input type="hidden" class="hiddenCurrency" ng-value="">
<div class="marker section-company-marker"></div>
</div>
<div class="breakdown-container paycheck-drawer-trigger ng-isolate-scope" ng-repeat="income in incomes" ng-id="income.id" label="Social Security" value="getIncomePart( { id: income.label } ).value" class-name="income.className" ng-if="showSegment( { id: income.label} )"
ng-click="segmentClick( { id: income.label } )" ng-style="{width: getPercent(income)}" style="width: 13.89%;">
<div class="paycheck-label-container">
<h5 class="paycheck-label ng-binding">Social Security</h5>
<h3 class="currency animated-curency ng-binding" ng-bind-html="value | currencyFilter : 0 | unsafe"><sup>$</sup>1,799</h3>
</div>
<input type="hidden" class="hiddenCurrency" ng-value="">
<div class="marker section-social-security-marker"></div>
</div>
<div class="breakdown-container paycheck-drawer-trigger ng-isolate-scope" ng-repeat="income in incomes" ng-id="income.id" label="Other Assets" value="getIncomePart( { id: income.label } ).value" class-name="income.className" ng-if="showSegment( { id: income.label} )"
ng-click="segmentClick( { id: income.label } )" ng-style="{width: getPercent(income)}" style="width: 27.19%;">
<div class="paycheck-label-container">
<h5 class="paycheck-label ng-binding">Other Assets</h5>
<h3 class="currency animated-curency ng-binding" ng-bind-html="value | currencyFilter : 0 | unsafe"><sup>$</sup>4,654</h3>
</div>
<input type="hidden" class="hiddenCurrency" ng-value="">
<div class="marker section-other-assets-marker"></div>
</div>
<div class="breakdown-container paycheck-drawer-trigger ng-isolate-scope" ng-repeat="income in incomes" ng-id="income.id" label="Income Gap" value="getIncomePart( { id: income.label } ).value" class-name="income.className" ng-if="showSegment( { id: income.label} )"
ng-click="segmentClick( { id: income.label } )" ng-style="{width: getPercent(income)}" style="width: 11.01%;">
<div class="paycheck-label-container">
<h5 class="paycheck-label ng-binding">Income Gap</h5>
<h3 class="currency animated-curency ng-binding" ng-bind-html="value | currencyFilter : 0 | unsafe"><sup>$</sup>292</h3>
</div>
<input type="hidden" class="hiddenCurrency" ng-value="">
<div class="marker section-income-gap-marker"></div>
</div>
</div>
</div>
</div>
</div>The Internal Revenue Service announced that for tax year 2015, the elective deferral (contribution) limit for employees who participate in a 401(k), 403(b), most 457 plans, and the federal government's Thrift Savings Plan is increased.
<div class="modal fade">
<div class="col-md-6 col-md-offset-3">
<div class="shadowify">
<div class="inner-container with-offset with-padding">
<p>The Internal Revenue Service announced that for tax year 2015, the elective deferral (contribution) limit for employees who participate in a 401(k), 403(b), most 457 plans, and the federal government's Thrift Savings Plan is increased.</p>
</div>
</div>
</div>
</div><div class="confirmation-process">
<dl>
<div class="complete">
<dt>Complete step</dt>
<dd>Some information about the completed request.</dd>
<dd>May contain multiple lines.</dd>
<dd>Some information about the completed request.</dd>
<dd>May contain multiple lines.</dd>
<dd>Some information about the completed request.</dd>
<dd>May contain multiple lines.</dd>
<dd>Some information about the completed request.</dd>
<dd>May contain multiple lines.</dd>
<dd class="status">
Complete <span class="em-check-bold"></span>
</dd>
</div>
<div class="complete">
<dt><strong>Request received</strong></dt>
<dd>Some information about the successful portion of the request.</dd>
<dd class="status">
Complete <span class="em-check-bold"></span>
</dd>
<dt class="error-block margin-top-100">Request failed</dt>
<dd class="partialErrorStatus">
<strong>Failed</strong></strong> <span class="em-x-bold"></span>
</dd>
<dd>
<span>Some information about the reason of failure.</span>
</dd>
</div>
<div>
<dt>Pending or in progress step</dt>
<dd>Some information about the pending request.</dd>
<dd>Probably letting the participant know when they can expect their request to move to the next stage.</dd>
</div>
</dl>
</div><dl class="pw-steps">
<div>
<dt>Your credit file indicates you may have a mortgage loan opened around July 2005. Who is the credit provided for this account?</dt>
<dd>
<div class="radio">
<label>
<input type="radio" name="stepRadios1" value="option1" checked>
DIRECT FINANCE HOLDING TRUST
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios1" value="option2">
SUNBELT NATIONAL MORTGAGE
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios1" value="option3">
WELLS FARGO
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios1" value="option3">
NONE OF THE ABOVE
</label>
</div>
</dd>
</div>
<div>
<dt>Which of the following is or was the last four digits of your cellular telephone number?</dt>
<dd>
<div class="radio">
<label>
<input type="radio" name="stepRadios2" value="option1" checked>
XXX-XXX-0000
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios2" value="option2">
XXX-XXX-1111
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios2" value="option3">
XXX-XXX-2222
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios2" value="option3">
XXX-XXX-3333
</label>
</div>
</dd>
</div>
<div>
<dt>Your credit file indicates you may have an auto loan opened around March 2017. Who is the credit provider for this account?</dt>
<dd>
<div class="radio">
<label>
<input type="radio" name="stepRadios3" value="option1" checked>
CITIZENS AUTO
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios3" value="option2">
HONDA MOTOR
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios3" value="option3">
PNC FINANCE
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios3" value="option3">
NONE OF THE ABOVE
</label>
</div>
</dd>
</div>
<div>
<dt>What is the total monthly payment for the above-referenced account?</dt>
<dd>
<div class="radio">
<label>
<input type="radio" name="stepRadios4" value="option1" checked>
$150 - $199
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios4" value="option2">
$200 - $249
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios4" value="option3">
$250 - $299
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="stepRadios4" value="option3">
NONE OF THE ABOVE
</label>
</div>
</dd>
</div>
</dl>| General Purpose Loan | Primary Residence Loan | |
|---|---|---|
| Loan Purpose | Any purpose | Only to purchase or build a principal residence; not to renovate or refinance your existing home |
| Maximum loan | $36,450 | $32,000 |
| Minimum loan | $1,000 | $5,000 |
| Repayment term | 12 to 60 months | 61 to 180 months |
| Documentation required | No | Yes |
| Interest rate | 4.25% | |
| Repayment | Automatically deducted from your bi-weekly paycheck | |
| Fees | Origination: $XX, Stamp: $XX, Maintenance: $X.XX /quarterly | |
| # Loans allowed | 1 new loan per calendar year | |
| Waiting period | 30 days after loan is paid before any new loan can be issued | |
| General Purpose Loan | Primary Residence Loan |
|---|---|
| Loan Purpose | |
| Any purpose | Only to purchase or build a principal residence; not to renovate or refinance your existing home |
| Maximum loan | |
| $36,450 | $32,000 |
| Minimum loan | |
| $1,000 | $5,000 |
| Repayment term | |
| 12 to 60 months | 61 to 180 months |
| Documentation required | |
| No | Yes |
| Interest rate | |
| 4.25% | |
| Repayment | |
| Automatically deducted from your bi-weekly paycheck | |
| Fees | |
| Origination: $XX, Stamp: $XX, Maintenance: $X.XX /quarterly | |
| # Loans allowed | |
| 1 new loan per calendar year | |
| Waiting period | |
| 30 days after loan is paid before any new loan can be issued | |
<!-- Desktop table -->
<table class="table table-bordered comparison-table comparison-table__desktop">
<thead>
<tr>
<th class="comparison-table-column__spacer"> </th>
<th class="comparison-table-column">General Purpose Loan</th>
<th class="comparison-table-column">Primary Residence Loan</th>
</tr>
</thead>
<tbody>
<tr>
<th>Loan Purpose</th>
<td>Any purpose</td>
<td>Only to purchase or build a principal residence; not to renovate or refinance your existing home</td>
</tr>
<tr>
<th>Maximum loan</th>
<td>$36,450</td>
<td>$32,000</td>
</tr>
<tr>
<th>Minimum loan</th>
<td>$1,000</td>
<td>$5,000</td>
</tr>
<tr>
<th>Repayment term</th>
<td>12 to 60 months</td>
<td>61 to 180 months</td>
</tr>
<tr>
<th>Documentation required</th>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<th>Interest rate</th>
<td colspan="2">4.25%</td>
</tr>
<tr>
<th>Repayment</th>
<td colspan="2">Automatically deducted from your bi-weekly paycheck</td>
</tr>
<tr>
<th>Fees</th>
<td colspan="2">Origination: $XX, Stamp: $XX, Maintenance: $X.XX /quarterly</td>
</tr>
<tr>
<th># Loans allowed</th>
<td colspan="2">1 new loan per calendar year</td>
</tr>
<tr>
<th>Waiting period</th>
<td colspan="2">30 days after loan is paid before any new loan can be issued</td>
</tr>
</tbody>
</table>
<!-- Mobile table -->
<table class="table table-bordered comparison-table comparison-table__mobile">
<thead>
<tr>
<th class="comparison-table-column">General Purpose Loan</th>
<th class="comparison-table-column">Primary Residence Loan</th>
</tr>
</thead>
<tbody>
<tr class="comparison-table__header-row">
<td colspan="2">Loan Purpose</td>
</tr>
<tr>
<td>Any purpose</td>
<td>Only to purchase or build a principal residence; not to renovate or refinance your existing home</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2">Maximum loan</td>
</tr>
<tr>
<td>$36,450</td>
<td>$32,000</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2">Minimum loan</td>
</tr>
<tr>
<td>$1,000</td>
<td>$5,000</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2">Repayment term</td>
</tr>
<tr>
<td>12 to 60 months</td>
<td>61 to 180 months</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2">Documentation required</td>
</tr>
<tr>
<td>No</td>
<td>Yes</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2">Interest rate</td>
</tr>
<tr>
<td colspan="2">4.25%</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2">Repayment</td>
</tr>
<tr>
<td colspan="2">Automatically deducted from your bi-weekly paycheck</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2">Fees</td>
</tr>
<tr>
<td colspan="2">Origination: $XX, Stamp: $XX, Maintenance: $X.XX /quarterly</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2"># Loans allowed</td>
</tr>
<tr>
<td colspan="2">1 new loan per calendar year</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="2">Waiting period</td>
</tr>
<tr>
<td colspan="2">30 days after loan is paid before any new loan can be issued</td>
</tr>
</tbody>
</table>| Participant Account Balance | Quarterly Fee | Annual Fee | |
|---|---|---|---|
| Online Investment Guidance | N/A | No Fee | No Fee |
| Online Investment Advice | N/A | $6.25 | $25.00 |
| Managed Account | < $100,000.00 | 0.2250 % | 0.90 % |
| Next $150,000.00 | 0.2000 % | 0.80 % | |
| Next $150,000.00 | 0.1750 % | 0.70 % | |
| > $400,000.00 | 0.1500 % | 0.60 % |
| Participant Account Balance | Quarterly Fee | Annual Fee |
|---|---|---|
| Online Investment Guidance | ||
| N/A | No Fee | No Fee |
| Online Investment Advice | ||
| N/A | $6.25 | $25.00 |
| Managed Account | ||
| < $100k | 0.2250 % | 0.90 % |
| Next $150k | 0.2000 % | 0.80 % |
| Next $150k | 0.1750 % | 0.70 % |
| > $400k | 0.1500 % | 0.60 % |
<!-- Desktop table -->
<table class="table table-bordered comparison-table comparison-table__desktop comparison-table__triple">
<thead>
<tr>
<th class="comparison-table-column__spacer"></th>
<th class="comparison-table-column">Participant Account Balance</th>
<th class="comparison-table-column">Quarterly Fee</th>
<th class="comparison-table-column">Annual Fee</th>
</tr>
</thead>
<tbody>
<tr>
<th>Online Investment Guidance</th>
<td>N/A</td>
<td>No Fee</td>
<td>No Fee</td>
</tr>
<tr>
<th>Online Investment Advice</th>
<td>N/A</td>
<td>$6.25</td>
<td>$25.00</td>
</tr>
<tr>
<!-- Use rowspan if the heading applies to multiple rows -->
<th rowspan="4">Managed Account</th>
<td>< $100,000.00</td>
<td>0.2250 %</td>
<td>0.90 %</td>
</tr>
<tr>
<!-- the heading for this row is defined on line 28 above -->
<td>Next $150,000.00</td>
<td>0.2000 %</td>
<td>0.80 %</td>
</tr>
<tr>
<!-- the heading for this row is defined on line 28 above -->
<td>Next $150,000.00</td>
<td>0.1750 %</td>
<td>0.70 %</td>
</tr>
<tr>
<!-- the heading for this row is defined on line 28 above -->
<td>> $400,000.00</td>
<td>0.1500 %</td>
<td>0.60 %</td>
</tr>
</tbody>
</table>
<!-- Mobile table. Note the addition of the `comparison-table__triple` class. -->
<table class="table table-bordered comparison-table comparison-table__mobile comparison-table__triple">
<thead>
<tr>
<th class="comparison-table-column">Participant Account Balance</th>
<th class="comparison-table-column">Quarterly Fee</th>
<th class="comparison-table-column">Annual Fee</th>
</tr>
</thead>
<tbody>
<tr class="comparison-table__header-row">
<td colspan="3">Online Investment Guidance</td>
</tr>
<tr>
<td>N/A</td>
<td>No Fee</td>
<td>No Fee</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="3">Online Investment Advice</td>
</tr>
<tr>
<td>N/A</td>
<td>$6.25</td>
<td>$25.00</td>
</tr>
<tr class="comparison-table__header-row">
<td colspan="3">Managed Account</td>
</tr>
<tr>
<!-- Note that we display the entire dollar amount for desktop, but abbreviate it for mobile -->
<td>< $100k</td>
<td>0.2250 %</td>
<td>0.90 %</td>
</tr>
<tr>
<!-- Note that we display the entire dollar amount for desktop, but abbreviate it for mobile -->
<td>Next $150k</td>
<td>0.2000 %</td>
<td>0.80 %</td>
</tr>
<tr>
<!-- Note that we display the entire dollar amount for desktop, but abbreviate it for mobile -->
<td>Next $150k</td>
<td>0.1750 %</td>
<td>0.70 %</td>
</tr>
<tr>
<!-- Note that we display the entire dollar amount for desktop, but abbreviate it for mobile -->
<td>> $400k</td>
<td>0.1500 %</td>
<td>0.60 %</td>
</tr>
</tbody>
</table><div class="table-filter">
<form class="form-inline pull-right">
<div class="form-group">
<label for="">From</label>
<input type="text" name="date-filter" id="date-filter" value="" placeholder="MM/DD/YYYY" class="form-control input-sm date-control" />
</div>
<div class="form-group">-</div>
<div class="form-group">
<label for="">To</label>
<input type="text" name="date-filter" id="date-filter" value="" placeholder="MM/DD/YYYY" class="form-control input-sm date-control" />
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Period</label>
<select name="period" id="period">
<option value="">Period</option>
</select>
</div>
<div class="form-group">
<label for="">As of</label>
<input type="text" name="date-filter" id="date-filter" value="" placeholder="MM/DD/YYYY" class="form-control input-sm date-control" />
</div>
</form>
</div>
<hr />
<div class="table-filter with-title navbar-form row">
<div class="col-sm-6">
<h2>Current Balance <span class="sub-title">As of July 21, 2015</span></h2>
</div>
<div class="col-sm-6">
<form class="form-group">
<label class="sr-only">Period</label>
<div class="custom-select custom-select-small">
<select name="period" id="period" ng-model="data.period">
<option value="">Period</option>
<option value="six months">Six months</option>
<option value="one years">One year</option>
<option value="Two years">Two years</option>
<option value="three years">Three years</option>
</select>
</div>
<label for="">As of</label>
<input type="text" name="date-filter" id="date-filter" value="" placeholder="MM/DD/YYYY" class="form-control input-sm date-control" />
</form>
</div>
</div>
<hr>
<div class="table-filter with-title with-background navbar-form row">
<div class="col-sm-6">
<h2>Current Balance <span class="sub-title">As of July 21, 2015</span></h2>
</div>
<div class="col-sm-6">
<form class="form-group">
<label class="sr-only">Period</label>
<div class="custom-select custom-select-small">
<select name="period" id="period" ng-model="data.period">
<option value="">Period</option>
<option value="six months">Six months</option>
<option value="one years">One year</option>
<option value="Two years">Two years</option>
<option value="three years">Three years</option>
</select>
</div>
<label for="">As of</label>
<input type="text" name="date-filter" id="date-filter" value="" placeholder="MM/DD/YYYY" class="form-control input-sm date-control" />
</form>
</div>
</div>