UI-Commons - What binds an element to a FieldModel

What is it in UI-Commons that binds an html element to a FieldModel? The reason I ask is because in the RegistrationApp when registering a patient all the elements are bound to the inputs as expected, so when the input values change the field.value() function returns the updated value. But for the relativeName the fieldModel value is always empty so seems like it isn’t binding correctly even though the input element is updating correctly. For example

selectedModel(questions).fields[1].element[0].value - always an empty string

document.getElementsByClassName("person-typeahead")[0].value - displays correct input value

I also noticed if I fetch the patient name element (which is bound correctly) with the fieldModel it is the same object:

document.getElementById("fr7369-field") === selectedModel(questions).fields[0].element[0]true

Whereas the relationshipName seems to be a different object

document.getElementsByClassName("person-typeahead")[0] === selectedModel(questions).fields[1].element[0]false

I think I figured out what is going on, the QuestionModel runs before angular storing the input element, but angular recreates the input element after the controller logic runs so the QuestionModel has a reference to an old element. Not sure if there is a current approach in openmrs for this as it seems there needs to be a way to register the models after separately for cases like this. I got something working using directives but not sure if that is a good approach or not