Dynamically generating a HTML option list using Angular.js
I think it's a bad idea for several reasons:


It is possible to have an empty data set in real-world app but it should not affect your sorting options in any way.
It is possible to have some optional fields or fields that aren't suit for sorting - images, additional description (original step-4 actually has such field) etc
You should have a full control over what you're displaying and being able to change it with ease.
Pretty titles instead of field names 'as is' look much better.
In case of a huge list of options you may need to group them using 'disabled' options as delimiters.


The main idea is to keep the balance between decoupling and ease of reusability and extensibility of your functionality. One of solutions is to create an object that describes the way particular data can be sorted. You can implement it as following, for example: http://jsfiddle.net/ocLrt7vp/

Adding sorting options to phones


$scope.phones =
{
    sorting: [
        {title:"---Name---", disabled:true},
        {sortQuery: "name", title: "By name: A-Z"},
        {sortQuery: "-name", title: "By name: Z-A"},
        {title:"---AGE---", disabled:true},
        {sortQuery: "-age", title: "New first"},
        {sortQuery: "age", title: "Old first"}
    ],
    data: [
        {'name': 'Nexus S',
            'snippet': 'Fast just got faster with Nexus S.',
            'age': 2010,
            androidVersion:"Unknown"},
        {'name': 'Motorola XOOM™ with Wi-Fi',
            'snippet': 'The Next, Next Generation tablet.',
            'age': 2012,
            weight: 708},
        {'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.',
            'age': 2011}
    ]
};


And changing index.html as following


&lt;div class="row"&gt;
  &lt;div class="col-md-2"&gt;
    &lt;!--Sidebar content--&gt;

    Search: &lt;input ng-model="query"&gt;
    Sort by:
      &lt;select ng-model="orderProp"&gt;
          &lt;option value="{{sorting.sortQuery}}" ng-repeat="sorting in phones.sorting"
                  ng-selected="sorting.sortQuery == orderProp"
                  ng-disabled="sorting.disabled"&gt;{{sorting.title}}&lt;/option&gt;
      &lt;/select&gt;

  &lt;/div&gt;
  &lt;div class="col-md-10"&gt;
    &lt;!--Body content--&gt;

    &lt;ul class="phones"&gt;
      &lt;li ng-repeat="phone in phones.data | filter:query | orderBy:orderProp"&gt;
        &lt;span&gt;{{phone.name}}&lt;/span&gt;
        &lt;p&gt;{{phone.snippet}}&lt;/p&gt;
        &lt;p ng-if="phone.weight"&gt;Weight: {{phone.weight}}g&lt;/p&gt;
        &lt;p ng-if="phone.androidVersion"&gt;Android Version: {{phone.androidVersion}}g&lt;/p&gt;
        &lt;hr/&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

  &lt;/div&gt;
&lt;/div&gt;


On the other hand detailed configuration may appear to be excessive for a regular real-world site. As well as passing data that changes once or two in a lifetime with each request should be considered as an example of a bad practice. You can achieve this behaviour in a number of different ways, better ways, but the goal of this comment is to share my vision with you, hope it helps :)