title: option selected not working from AngularJS template
body: <p>I'm new to AngularJS, so it could be really simple, but I just can't seem to figure it out. The problem is not in the AngularJS code itself, but I'm sure it is somehow connected, because I've tried it in a blank pure-HTML test page, and it worked, how it's supposed to.</p>
  
  <p><em>headers.html:</em></p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;td colspan="2" align="right"&gt;
              Sort headers by:
              &lt;select ng-model="sortHeaders"&gt;
                  &lt;option value="rating"&gt;Rating&lt;/option&gt;
                  &lt;option value="id" selected&gt;ID&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Rating&lt;/th&gt;
          &lt;th&gt;Header&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr ng-repeat="header in headers | filter:search | orderBy:sortHeaders"&gt;
          &lt;td&gt;{{header.rating}}&lt;/td&gt;
          &lt;td&gt;{{header.title}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>The problem here is, as the title says, with <code>&lt;option value="id" selected&gt;</code> not being selected at page load, how it's supposed to be.
  <em>headers.html</em> is, obviously, a template for data output. And it does the job perfectly, except for this <code>selected</code> problem.</p>
  
  <p>It's loaded from <em>headers_app.js:</em></p>
  
  <pre><code>var headersApp = angular.module('headersApp', []);
  
  headersApp.directive('headers', [function () {
  return {
      restrict: 'E',
      controller: function($scope, $http) {
          $http.get('/api/headers.json').success(function(data) {
              $scope.headers = data.headers;
          });
      },
      templateUrl: '/templates/headers.html',
      replace: true,
      link: function (scope, element, attrs) {
          console.log('linked headersApp');
      }
  };
  }]);
  </code></pre>
  
  <p>and, of course, there is this guy inside <em>index.html:</em></p>
  
  <pre><code>...
  &lt;headers&gt;
  &lt;/headers&gt;
  ...
  </code></pre>
  
  <p>Once again, everything else works as expected. The only problem is that supposed-to-be-selected option is not actually selected at page load.</p>
  
  <p>Any ideas?</p>