Is it possible to use Microsoft UIA to automate sites designed in Angular?

I am trying to automate UI for a site designed in Angular and when I inspect the browser (Chrome) with UISpy.exe, I find that certain controls do not exist in the tree at all, even though I can see them in the browser.

In certain cases, multiple fields (e.g. Transaction Date, Delivery Date, their labels, text and icons) exist as one control on the UI tree.

Here is an example of controls that seem to exist as a single control in the UI tree

I used Developer tools to extract HTML for this and here it is.

<div class="input-daterange form-group right-inner-addon" ng-class="{'has-error': submitted &amp;&amp; requisitionForm.transactionDate.$invalid}">
                    <label for="transactionDate" class="ng-binding">Transaction Date<span class="asterisk_input">  </span></label>
                    <input date-picker="" type="text" id="transactionDate" today="" class="form-control date-picker input-lg ng-isolate-scope hasMultiCalendarPicker ng-valid ng-valid-required ng-valid-valid-date-format ng-dirty" name="transactionDate" ng-model="requisition.transactionDate" aria-label="Transaction Date" aria-required="true" required="" autocomplete="off" placeholder="MM/DD/YYYY" title="Press F9 to open the calendar"><span class="calendar-icon calendar-img"></span>
                </div>

However the UI tree in UISpy shows just a single control on the UI tree.

How can I automate and access individual items on the screen, e.g. Transaction Date Label, the value for Transaction date only etc..?

Source: Read More