How do I determine with radio button is selected and display html accordingly?

I am trying to implement a different modal view that depends on which radio button is working.  But, the below code is not working correctly.  How am I implementing the radio buttons and the usage incorrectly?

<div class="modal-header">
        <input id="treeRadio" name="treeRadio" type="radio" checked="checked" ng-model="hMode" ng-value="tree" />
        <label for="treeRadio">Tree Mode</label>
        <input id="searchRadio" name="treeRadio" type="radio" ng-model="hMode" ng-value="search" />
        <label for="searchRadio">Search Mode</label>
        <input id="bookmarkRadio" name="treeRadio" type="radio" ng-model="hMode" ng-value="bookmark" />
                 <label for="bookmarkRadio">Search Mode</label>
    <!--Tree Mode-->
    <div class="modal-open" style="height: 450px; overflow-y: auto;" ng-if="hMode=='tree'">
               <!--do stuff-->
    <!--Search Mode-->
    <div class="modal-open" ng-if="hMode=='search'">
              <!--do stuff-->
    <!--Bookmark Mode-->
    <div class="modal-open" ng-if="hMode=='bookmark'">
               <!--do stuff-->
Who is Participating?
Julian HansenConnect With a Mentor Commented:
Change ng-value to value - ng-value is usually used in an ng-repeat to dynamically populate a value attribute.
spazjr01Author Commented:
Thanks.  Works perfectly per answer given.
Julian HansenCommented:
You are welcome.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.