title: select ng-options list of years and see current year by default
body: <p>I am using <code>select</code> and <code>ng-options</code> in angularjs to show a list of years that I construct myself.</p>
  
  <p><strong>here is the <a href="https://plnkr.co/edit/UVGwuJjEqgL2rS0hMVMF?p=preview" rel="nofollow noreferrer">plunker link</a>.</strong></p>
  
  <h2>My question is:</h2>
  
  <p>How to show the current year if you click on the dropdown list? I mean, supposing where are in 2017, when the user clicks, the default choice will be 2017 which will be situated in the middle of the list. the list will be in chronological order, starting from 20 years before current year and ending 20 years after current year. In other words, by clicking on the list the first visible default choice will be current year, and the user can roll up and down the years.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);
  
  app.controller('MyCtrl', function($scope) {
      $scope.dates = {};
      $scope.years = [{value: 'Year', disabled: true}];
      var current_year = new Date().getFullYear();
      for(var i = current_year - 20; i &lt;= current_year + 20; i++){
          $scope.years.push({value: i + ''});
      }
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"&gt;
     &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;body ng-app="app"&gt;
   &lt;div ng-controller="MyCtrl"&gt;
  
          &lt;label class="control-label"&gt;Year&lt;/label&gt;
    &lt;select name="startYear" ng-model="dates.startYear" id="startYear"
            ng-options="year.value as year.value disable when year.disabled for year in years"
            required&gt;
        &lt;option value="" disabled &gt;Choose one&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>update 1:</h2>
  
  <p>to clear up the misunderstanding, I want to center the list on the current year ONLY when the list is clicked, otherwise, the default SHOWN value is "choose one", but the default view should be centered on  current year when the list is opened.</p>
  
  <h2>update 2:</h2>
  
  <p>Here is my dropdown menu:</p>
  
  <p><a href="http://preview.themeforest.net/item/cliptwo-bootstrap-admin-template-with-angularjs/full_screen_preview/10290688" rel="nofollow noreferrer">http://preview.themeforest.net/item/cliptwo-bootstrap-admin-template-with-angularjs/full_screen_preview/10290688</a></p>
  
  <p>Go to Forms / Form Wizard / Step 3 Billings</p>
  
  <p><a href="https://i.stack.imgur.com/YFI1n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YFI1n.png" alt="enter image description here"></a></p>
  
  <p>The default value in this above link is the word "Year", but when clicked, the list of years open up, and the list is not centered on the current year. Suppose we have 40 years before current year and 40 years after, then the user has to scroll down to current year interminably. 
  So the idea is to center to the current year when the box is clicked.
  here is the css file that is related to it, <a href="http://www.cliptheme.com/demo/clip-two/AngularJs-Admin/STANDARD/assets/css/styles.css" rel="nofollow noreferrer">link css</a>.</p>