When using angular UI buttons, users can select search criteria by choosing between Patient, ID, or Date. If Patient or ID is selected, the searchByText div will be shown. If Date is selected, the searchByText will be hidden and the SearchBydateRange will be displayed. However, there is an issue with the Angular show and hide functionality in my code. I referenced this Codepen example for help: http://codepen.io/SusanneLundblad/pen/iBhoJ
<div class="panel-body">
<form role="form">
<div class="col-md-7">
<div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
<label class="sr-only" for="search">Enter Search</label>
<input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." data-ng-model="searchText">
</div>
<div id="SearchBydateRange" class="form-group form-group-search col-md-4" data-ng-show=" searchOption == 'date' ">
<label class=" sr-only" for="search">
Enter Search
</label>
<input type="text" class="form-control col-md-2" id="search" placeholder="From Date" data-ng-model="fromDate">
<input type="text" class="form-control col-md-2" id="search" placeholder="To Date" data-ng-model="toDate">
</div>
</div>
<div class="col-md-4 text-center">
<div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'patient'">Patient</label>
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'id'">ID</label>
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'Date'" va>Date</label>
</div>
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-sm btn-info btn-search full-width" data-ng-click="doSearch()">Search</button>
</div>
</form>
</div>