AngularJs：动态附加选择框

Question

我需要动态添加选择框。为此我使用了以下代码。

  $scope.newsource = ["New South Wales","Victoria"];
  angular.element(document.getElementById('testdiv')).append($compile("<select ng-model='selectedVal' ng-options='key for key in "+$scope.newsource+"' ng-change='dropdownChanged(selectedVal)'><option value=''>--select--</option></select>")($scope));

但是没有列出选项。我怎样才能使它发挥作用？

代码：

    myApp.directive("cascadingDropdowns", [
      "$compile", function($compile) {
        return {
          restrict: "E",
          replace: true,
          scope: {
            noOfDropdowns: '=',
            source: '='
         },
         link: function(scope, element, attr) {

         },
          templateUrl: "../templates/cascading-dropdown/cascading-dropdown.html",
          controller: function($scope, $compile, $http) {
            $scope.dropdownChanged = function(selectedVal) {
              if(selectedVal != null)
              {
                $scope.newsource = ["New South Wales","Victoria"];
                angular.element(document.getElementById('testdiv')).append($compile("<select ng-model='selectedVal' ng-options='key for key in $scope.newsource' ng-change='dropdownChanged(selectedVal)'><option value=''>--select--</option></select>")($scope));
              }
            };
          }
        };
      }
    ]);

cascading-dropdown.html;

  <div id="testdiv"><select ng-model="selectedVal" ng-options="key for (key, value) in source" ng-change="dropdownChanged(selectedVal)">
    <option value="">--select--</option>
  </select></div>

请帮忙， 感谢。