Currently, I am going through the tutorials and documentation for Angularjs that is provided on the official Angularjs website.
One of the examples involves adding a select box for ordering which looks like this:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
In the controller, we set $scope.orderProp = "age" which effectively makes 'Newest' the default option selected.
Subsequently, I attempted to store the order items in a model and populate the select box by using ng-repeat as shown below:
<select ng-model="orderProp">
<option ng-repeat="orderby in orderProperties" value="{{orderby.criteria}}">{{orderby.property}}</option>
</select>
Here:
The orderProp model is:
function PhoneListCtrl($scope){
$(document).ready($scope.orderProp = "age");
$scope.orderProperties = [
{"property":"Alphabetical","criteria":"name"},
{"property":"Newest","criteria":"age"}
];
}
When inspecting the DOM, I can see both value="name" and value="age". However, despite this, the default value is not automatically set to "Newest". I find it puzzling why the hardcoded value="age" works, while value="{{orderby.criteria}}" does not. Could someone provide some guidance on this matter?