AngularJS input value as array not matching model

Question

I'm building a sort by box to help sort my ng-repeated data.

My sort box currently looks like this:

<select name="day" ng-model="Events.orderAttraction" data-ng-change="Events.limit = 6">
    <option value="['!rating', '-rating']">Rating (high to low)</option>
    <option value="rating">Rating (low to high)</option>
    <option value="name">Attraction (a-z)</option>
    <option value="-name">Attraction (z-a)</option>
</select>

And my order variable in my controller is currently:

vm.orderAttraction = ["!rating", "-rating"];

As my first option value equals the exact same as my the model value that my select box is linked to, it should default to this value on page load. Where as in stead i'm getting ? object:5 ?(blank option) as my select box loads on the page.

I have a feeling that angular is picking up my option value as a string and not an array, hence not matching it to the model value. But I just can't seem to work this one out.

Thanks for any help.

Answer 1

From https://docs.angularjs.org/api/ng/directive/ngOptions:

ngOptions should be used when the model needs to be bound to a non-string value. This is because an option element can only be bound to string values at present.