How to make angular dropdown control (not select) in angular form?

I want to use a dropdown button instead of a select-options in a form. I'm using angular, and the problem is: 1. The dropdown should display the name of the selection but the form should submit its Id instead 2. Changes to the dropdown don't make the form dirty

How do I resolve this?


ok, resolved, it appears I had a very small typeo in the dropdown button's ng-if expression, which caused it to always show "None" instead of the selected item from the list. This led me to think that the selection in the form did not propagate to the model..

anyway, here's my working codepen - I'm using the form field controller's setViewModel to push a value from the dropdown to the hidden input field, and angular takes care of pushing it down to the model while making the form dirty:


Anyway, it seems like the most elegant way (I could find) to do this (except maybe using a directive to compeltely replace the select input..)

Hope this helps!


 ? jquery count select dropdown which are not disabled and have specific option selected
 ? PHP Dropdown and database
 ? Activate a dropdown option from another button/llink
 ? Php pdo display enum values in dropdown
 ? Keep Bootstrap dropdown open on click
 ? Dropdown does not hide properly in Microsoft edge after hover when floated
 ? IE/MS Edge links in Bootstrap col-* not working on page load
 ? Bootstrap dropdown-toggle doesn't work with svg wrapped in an object tag
 ? aurelia - dropdown not selecting value from db on load
 ? Html multiple selected dropdown showing first item selected by default