css center default value in select dropdown menu

I am using select and ng-options in angularjs to show a list of years that I construct myself. I pass the current year as the default value to the select.

here is the plunker link.

My question is:

How to center the list on the default value? My plunker is not complete because my real situation is like the one found here http://www.cliptheme.com/demo/clip-two/AngularJs-Admin/STANDARD/#/app/form/wizard

Go to Forms / Form Wizard / Step 3 Billings

as you can see, by choosing a year, and then clicking back again on it, the menu is centered on that selected year.

But my problem is that when I pass the default year value to it, as if I have already selected, and then I click back on the list, I should see it centered on that default value, but it isn't. Once I click again on that year, and click on the list again, I see it centered.

In other words, passing a year as default value doesn't play the same role as if I selected it for the first time by clicking, because when I re-click again, it is not centered. How can we fix this problem?

Here is the CSS file for the selecter I am using: css link, this is not included in the plunker nor in the snippet, because I couldn't properly reproduce that CSS on the plunker, if you can, please do it.

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 <= current_year + 20; i++){
        $scope.years.push({value: i + ''});
    }
    var d = new Date();
    var n = d.getFullYear();

    $scope.dates.startYear = n;

});

   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<body ng-app="app">
 <div ng-controller="MyCtrl">

        <label class="control-label">Year</label>
  <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>
      <option value="" disabled >Choose one</option>
  </select>
</div>
</body>

update 1:

Here is the directive that handles this particular element:

https://pastebin.com/0diFfH6t

update 2:

Here is the plunker that shows exactly the problem even after Dekel's solution. https://plnkr.co/edit/aWbZkp4xitvBcMmhHadI?p=preview

as you can see, on the page load, when clicked on the dropdown menu, it doesn't center on the default value.