Structures

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.

Investment

1 Yr

5 Yr

10 Yr / Incep

Gross
Exp %

UFOA High Equity Option (UF3HEQ)
75 25 75% equities / 25% bonds
Asset Allocation
8.70%
11.43%
7.03%
N/A
Neuberger Berman Genesis Fund - Trust (NB-GEN)
50 50 50% equities / 50% bonds
Mid Cap
4.87%
14.32%
9.41%
N/A
WFOA High Equity Option (UF3HAA)
75 25 75% equities / 25% bonds
Asset Allocation
8.70%
11.43%
7.03%
N/A
XFEE High Equity Option (XFEEEQ)
75 25 75% equities / 25% bonds
Asset Allocation
8.70%
11.43%
7.03%
N/A
ADSA High Equity Option (ADSAEQ)
75 25 75% equities / 25% bonds
Asset Allocation
8.70%
11.43%
7.03%
N/A
BFBA High Equity Option (BFBHEQ)
75 25 75% equities / 25% bonds
Asset Allocation
8.70%
11.43%
7.03%
N/A
Russell LifePoints 2040 Strategy R5
40 60 40% equities / 60% bonds
N/A
N/A
N/A
N/A
Great-West SF Lifetime 2020 Trust
70 30 70% equities / 30% bonds
N/A
N/A
N/A
N/A
Great-West SF Lifetime 2015 Trust
50 50 50% equities / 50% bonds
N/A
N/A
N/A
N/A
Russell LifePoints 2030 Strategy R5
50 50 50% equities / 50% bonds
N/A
N/A
N/A
N/A
Russell LifePoints 2020 Strategy R5
50 50 50% equities / 50% bonds
N/A
N/A
N/A
N/A
Great-West SF Lifetime 2030 Trust
80 20 80% equities / 20% bonds
N/A
N/A
N/A
N/A
Great-West SF Lifetime 2025 Trust
50 50 50% equities / 50% bonds
N/A
N/A
N/A
N/A
Really Coolness
100 0 100% equities / 0% bonds
Radical Funds
-6.98%
N/A
6.13%
N/A
Super Cool Fund
100 0 100% equities / 0% bonds
Super Funds
-6.98%
N/A
6.13%
N/A
Rad Coolness
100 0 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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.
Del
Investment
Mix
Asset Class
Allocation
Really Coolness
100 0 100% equities / 0% bonds
Radical Funds
25
Super Cool Fund
100 0 100% equities / 0% bonds
Super Funds
25
Rad Coolness
100 0 100% equities / 0% bonds
Radical Funds
25
Great-West SF Lifetime 2020 Trust
70 30 70% equities / 30% bonds
0
Russell LifePoints 2040 Strategy R5
40 60 40% equities / 60% bonds
25
Add more funds / View all funds
Total: 100%
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.
Equities
100
100 0 100% equities / 0% bonds
0
Bonds
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>


2.00% 0.00%

<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>
Selected fund:

Investment

Asset Class

Details

AdviseMe! A
10% PIMCO Income Instl Bond Funds Details
15% Dodge & Cox International Stock International Funds Details
55% Vanguard US Value Large Cap Funds Details
20% Vanguard Strategic Equity Inv Mid Cap Funds Details
AdviseMe! MA
20% PIMCO Income Instl Bond Funds Details
50% Vanguard US Value Large Cap Funds Details
17% Vanguard Strategic Equity Inv Mid Cap Funds Details
13% Dodge & Cox International Stock International Funds Details
AdviseMe! M
8% Dodge & Cox International Stock International Funds Details
40% Vanguard US Value Large Cap Funds Details
40% PIMCO Income Instl Bond Funds Details
12% Vanguard Strategic Equity Inv Mid Cap Funds Details
AdviseMe! C
3% Dodge & Cox International Stock International Funds Details
5% DFA Inflation-Protected Securities I Bond Funds Details
55% PIMCO Income Instl Bond Funds Details
32% Vanguard US Value Large Cap Funds Details
5% Vanguard Strategic Equity Inv Mid Cap Funds Details
AdviseMe! VC
5% Key Guaranteed Portfolio Fund Fixed Details
2% Dodge & Cox International Stock International Funds Details
3% Vanguard Strategic Equity Inv Mid Cap Funds Details
55% PIMCO Income Instl Bond Funds Details
25% Vanguard US Value Large Cap Funds Details
10% DFA Inflation-Protected Securities I Bond Funds Details
<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') &amp;&amp; targetYearFundCtrl.selectedModel!==null">Asset Class</h4><!-- end ngIf: targetYearFundCtrl.isState('modelPortfolio') && targetYearFundCtrl.selectedModel!==null -->
            </th>
            <th>
              <h4 ng-class="{ 'invisible' : (targetYearFundCtrl.isState('modelPortfolio') &amp;&amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

From

Build Your Own Portfolio
Really Coolness 70%
Super Cool Fund 20%
Rad Coolness 10%

To

Build Your Own Portfolio
Super Cool Fund 50%
Rad Coolness 50%
<div class="row allocation-content ng-scope" ng-if="!reviewChangesCtrl.hasError &amp;&amp; !reviewChangesCtrl.getDataLoaded() &amp;&amp; !reviewChangewCtrl.isLoading">
<div class="fund-tables-wrapper">
  <!-- ngIf: originalFundsExist() && !isEnrollmentFlow() --><div class="col-md-5 fund-list-wrapper ng-scope" ng-if="originalFundsExist() &amp;&amp; !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() &amp;&amp; !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() &amp;&amp; !isEnrollmentFlow(), 'col-md-12': !originalFundsExist() || isEnrollmentFlow()}">
    <div class="fund-list-container" id="new-fund-container">
      <header>
        <!-- ngIf: originalFundsExist() && !isEnrollmentFlow() --><h3 ng-if="originalFundsExist() &amp;&amp; !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>
Selected fund:

Investment

Details

Russell LifePoints 2040 Strategy R5 Details
Russell LifePoints 2030 Strategy R5 Details
Great-West SF Lifetime 2030 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') &amp;&amp; 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>
Viewing: Rate of Return
Filter
<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>

Confirmation

<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>

Primary Beneficiaries

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

Contingent Beneficiaries

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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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>

Best next step

Company Match

<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>

Slider

    <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>
    &lt;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"
    &gt;&lt;/pw-slider&gt;
</pre>
Reset
<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="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>
My Standard Contribution
56%
%

$20.00 per pay period

The estimated amount to be deducted from your paycheck is based on the salary provided times your contribution rate.

Company Match
6%
Apple 401(k) Plan matches up to
  • 100% on the first 6% for 5 years of service or more
  • 75% on the first 6% for 2 but less than 5 years of service,
  • 100% on the first 6% for 5 or more years of service.
  • <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>

    Panels

    Note: these panels won't collapse in styleguide due to lack of JS

    Markup

    • Panel container class is .panel-group
    • Each panel is assigned classes of .panel .panel-default
    • Panel header is wrapped in a header element with classes .panel-heading .form-group
    • The title of the panel, is wrapped with a label tag, with the classes radio-inline panel-title
    • Inside of the 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.
    • Body of content wrapping div should be assigned classes of panel-body panel-collapse
    • Inside of that will be a div that holds the body content. This has the class of panel-collapse-content

    Assignments

    • The label has various data- attributes that allow us to control the panels.
    • data-toggle="collapse" tells the pannel it should collapse and expand
    • data-target defines the panel body for the panel header
    • data-parent defines the parent element for the group of panels.
    We’re using the bootstrap panel for more information

    Example

    Panel Content
    Panel Content
    <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&rsquo;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>
    At age 65 my estimated monthly health care costs will be 838 (22% of my income)
    Created with Raphaël 2.1.0
    $2,965.30
    Insurance Premiums
    Doctors & Tests (Parts A & B) $256
    Prescription Drugs (Part D) $211
    Medical Supplemental $199
    Dental Insurance $43
    Additional out-of-pocket costs
    Doctors & Tests $8
    Prescription Drugs $29
    Hearing & Vision $68
    Dental $24
    <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 &amp; Tests (Parts A &amp; 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 &amp; 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 &amp; 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>
    How do I compare to other people like me?
    My Peers

    Top Peers

    Me
    Your peers are at 48% of their monthly retirement income goal. 48% of goal
    Your peers are at 94% of their monthly retirement income goal. 94% of goal
    Contribution Rate: 6% 15% 12%
    401(k) Balance: $35,000 $68,000 $43,266.64
    <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>

    My Estimated Retirement Income

    Est. Retirement Income

    $10,333 Show the details
    My Savings

    $3,879

    Employer Contributions

    $2,326

    Social Security

    $1,799

    Other Assets

    $4,654

    Income Gap

    $292

    <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>
    <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>
    Complete step
    Some information about the completed request.
    May contain multiple lines.
    Some information about the completed request.
    May contain multiple lines.
    Some information about the completed request.
    May contain multiple lines.
    Some information about the completed request.
    May contain multiple lines.
    Complete
    Request received
    Some information about the successful portion of the request.
    Complete
    Request failed
    Failed
    Some information about the reason of failure.
    Pending or in progress step
    Some information about the pending request.
    Probably letting the participant know when they can expect their request to move to the next stage.
    <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>
    Your credit file indicates you may have a mortgage loan opened around July 2005. Who is the credit provided for this account?
    Which of the following is or was the last four digits of your cellular telephone number?
    Your credit file indicates you may have an auto loan opened around March 2017. Who is the credit provider for this account?
    What is the total monthly payment for the above-referenced account?
    <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">&nbsp;</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>&lt; $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>&gt; $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>&lt; $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>&gt; $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>
    Menu