Jaws18 reading Angular data bindings in IE11

Question

I have been tasked with trying to make some of our webpages 508 compliant. While running through our pages with Jaws18 I noticed that sections that are being added with ng-if or ng-show are being read back as the data bindings. This does not occur when browsing in Chrome, only IE11. (which unfortunately is what I am required to test with.)

When the screen reader gets to the second section that is added with the ng-if the {{rejection.code}} is read back as "left brace left brace rejection code right brace right brace".

Does anyone know how to correct this behavior?

<form class="form-horizontal" id="SearchForm" name="SearchForm" novalidate> 
<section id="test">
    <div class="form-group">
        <label for="pcEmail" class="col-sm-3 control-label">
            <span class="glyphicon-asterisk"></span> E-mail
        </label>
        <div class="col-sm-6">
            <input type="email" ng-pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/" class="form-control"
                   id="pcEmail" name="pcEmail"
                   placeholder="E-mail"
                   ng-model="vm.searchModel.email"
                   ng-required="true"
                   ng-maxlength="50" />
        </div>
    </div>
    <div class="row text-center" ng-if="vm.submitBtnVisible">
        <div class="col-md-6" ng-if="vm.searchModel.recertificationYearId > 0">
            <button class=" btn btn-lg btn-primary" type="submit" ng-disabled="cediRecertSearchForm.$invalid" ng-click="vm.checkStatus(cediRecertSearchForm)">
                Check Status
            </button>
        </div>
    </div>
</section>
<section ng-if="vm.searchResult.rejectionReasons && vm.searchResult.rejectionReasons.length >0" aria-live="polite" tabindex="0">
    <div data-cedi-widget-header subtitle="Rejection Reasons History"></div>
        <table class="table table-bordered table-condensed table-responsive">
            <thead>
                <tr>
                    <th>Rejection Code</th>
                    <th>Rejection Desc</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="rejectionCode in vm.searchResult.rejectionReasons">
                    <td>{{rejectionCode.code}}</td>
                    <td>{{rejectionCode.description}}</td>
                </tr>
            </tbody>
        </table>
</section>

Answer 1

Please use ng-bind or ng-bind-html instead of {{}}. Example:

<tr ng-repeat="rejectionCode in vm.searchResult.rejectionReasons">
   <td ng-bind="rejectionCode.code"></td>
   <td ng-bind="rejectionCode.description"></td>
</tr>