AngularJS Data Driven Drop Down: Selecting a value from a drop down clears the drop down value on the first change, but then works fine after the first change.

I am using AngularJS, jQuery, and Bootstrap.  I have a couple of drop downs that are data driven, as are the selected values of each.  The first time I change the value of either, the value of the drop down is cleared (shows blank).  Any further changes work fine.  It should, of course, work on the first try, but it doesn't.  Everything seems fine, but that's just not the case...  The drop downs are in a modal form, but that shouldn't have any bearing on this issue.  Please help me figure out how to fix this bug.  Thanks!

This is the code for the drop downs:
<!-- Change Dollar Range Modal Form Inception -->
<div class="modal fade" role="dialog" id="changeRangeModal">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aira-hidden="true">&times;</button>
                <h3>Update Rule: Dollar Range</h3>
            </div>
            <div class="modal-body">
                <form class="form-inline" name="changeRange">
                    <div>
                        <label for="minMax">Dollar Range</label>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" id="minRangeLabel">Minimum</span>
                        <select style="width: 182px;"
                            data-ng-model="newMinRange"
                            id="newMinRange"
                            data-ng-options="min.value as min.name for min in lowRange"
                            class="form-control"
                            required>
                        </select>
                        <div>
                            <span data-ng-show="changeRange.newMinRange.$error.required" class="text-danger">Please Select a Minimum Dollar Range</span>
                        </div>
                    </div>
                    to
                    <div class="input-group">
                        <span class="input-group-addon" id="maxRangeLabel">Maximum</span>
                        <select style="width: 182px;"
                            data-ng-model="newMaxRange"
                            id="newMaxRange"
                            name="newMaxRange"
                            data-ng-options="max.value as max.name for max in highRange"
                            class="form-control"
                            required>
                        </select>
                        <div>
                            <span data-ng-show="changeRange.newMaxRange.$error.required" class="text-danger">Please Select a Maximum Dollar Range</span>
                        </div>
                    </div>
                    <div data-ng-show="showMinMaxerror" class="alert alert-danger push-down">
                        {{minMaxError}}
                    </div>
                    <div data-ng-show="showEmptyError" class="alert alert-danger push-down">
                        {{selectMinError}}
                        {{selectMaxError}}
                    </div>
                    <div class="modal-footer">
                        <input class="btn btn-primary" data-ng-click="rangeChanged()" data-ng-disabled="checkFormRange()" type="submit" value="Change">
                        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Change Dollar Range Modal Form Completion -->

Open in new window

LVL 1
brianmfallsAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
How are you storing the underlying data - there are issues with selects that have to do with the indexing of objects see here https://docs.angularjs.org/api/ng/directive/ngOptions

Specifically look at the track by clause
0
 
brianmfallsAuthor Commented:
Here's a visual progression.  Pretty simple stuff.  :)

Form Progression
0
 
brianmfallsAuthor Commented:
More info:

This wasn't an issue until I added 'as min/max.name' to the data-ng-options attribute.  Adding 'as min/max.name' to the data-ng-options attribute simply ensures that the stored value is selected when the form is pulled up.

Clearly this problem could be solved by removing the addition to the data-ng-options attribute, but I need to have my cake and eat it too in this case.  ;)
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
brianmfallsAuthor Commented:
Going to be offline for the weekend.  I'll respond when I return.  :)
0
 
brianmfallsAuthor Commented:
I tried everything I could, in every way I could, including the track by clause.  Nothing.  I ended up taking AngularJS out of the equation.  They need to get their stuff strait with regard to selects...
0
 
brianmfallsAuthor Commented:
Thanks anyway
0
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.