Angularjs - ajout/retrait dynamique des éléments html (liste déroulante)

voici mon code
http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD?p=preview

1. pourquoi les jours dropdown ne pas lier des données avec scope.demoDays, il est toujours vide?

2. est-ce la bonne façon d'ajouter de la dropdown dynamiquement? Si l'utilisateur ajoute 5 déroulante, comment faire pour obtenir les résultats , sera ng-model="selectedDay" créer un tableau de sélection? des suggestions?

Merci

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $compile) {

  var counter = 0;
  $scope.fields = [];

  $scope.days =['Day','Sun','Mon','Tue','Wed','Thu','Fri','Sat'];

    $scope.addField = function() {          
     $scope.fields.push({name:"test " + counter++});
    };
});



app.directive('demoDisplay', function($compile){
    return {
    scope:{
        demoDisplay:"=", //import referenced model to our directives scope
        demoDays:"="
      },
     link:function (scope, elem, attr, ctrl) 
      {
        scope.$watch('demoDisplay', function(){ //watch for when model changes

          elem.html("") //remove all elements

          angular.forEach(scope.demoDisplay, function(d){ //iterate list
              var s = scope.$new(); //create a new scope
              angular.extend(s,d); //copy data onto it
              console.log(scope.demoDays);

              var template = '<label class="item item-input"><div class="style-select"><select ng-model="selectedDay" ng-options="day for day in scope.demoDays"></select><br></div></label>';
              elem.append($compile(template)(s)); //compile template & append
          });
        }, true) //look deep into object
      }
    }
})

html

<button ng-click="addField()">Add Field</button>

<div demo-display="fields" demo-days="days"></div>