Пустой выпадающие при добавлении <select> с помощью JavaScript с insertAdjacentHTML и нг-вариантами

Question

Так вот в этой скрипке я сделал в обоих направлениях: https://jsfiddle.net/cicerohellmann/Lt8gju19/

В HTML я назвал его, и он работал.

<select ng-model="ampm" ng-options="item.friendName for item in options[1]"></select> 

AM/PM: {{}} AMPM

добавляющим с использованием JavaScript не работает.

html = 
"<select ng-model='ampm' 
ng-options='item.friendName for item in options[1]' 
class='ng-pristine ng-valid'></select>"; 


div = document.getElementById('test'); 
div.insertAdjacentHTML('beforeend', html); 

Я использую эти данные для проверки:

$scope.options = [ 
    [{ 
     "friendName": "Escobar", 
     "points": "200" 
    }, { 
     "friendName": "Pedro", 
     "points": "200" 
    }], 
    [{ 
     "friendName": "Cicero", 
     "points": "200" 
    }, { 
     "friendName": "Ciclano", 
     "points": "200" 
    }], 
    [{ 
     "friendName": "Jeremias", 
     "points": "200" 
    }, { 
     "friendName": "Boça", 
     "points": "200" 
    }], 
    [{ 
     "friendName": "Leite com pera", 
     "points": "200" 
    }, { 
     "friendName": "Rato borrachudo", 
     "points": "200" 
    }] 
    ]; 

Я пытался в течение 2-х дней, исследовал об этом и ничего. У меня тоже нет ошибок.

И мне действительно нужен этот состав, потому что каждый выпадающий будет создаваться динамически, что число там будет выставиться динамически слишком

Но, конечно, лучше предложение тогда как им делать это было бы оценено ,

Answer 1

Я на самом деле обновляю эту скрипку, и я опубликую полный и хороший способ сделать это. Но сейчас, это мой ответ:

Html5

<div id="bob" ng-app ng-controller="MyCtrl"> 
    <select ng-model="ampm" ng-options="item.friendName for item in options[1]"></select> 
    AM/PM: {{ampm}} 
    <button ng-click="changeTopics()">Change</button> 
    <button ng-click="click()"></button> 

</div> 

Javascript

function MyCtrl($scope, $compile) { 
     var selectElement = angular.element("<select ng-model='ampm' ng-options='item.friendName for item in options[1]' class='ng-pristine ng-valid'></select>"); 

     var integer = 0; 

     $scope.click = function(){ 

    selectElement = angular.element("<select ng-model=\"test"+ integer +"\" ng-options=\"item.friendName for item in options[" + integer + "]\" class='ng-pristine ng-valid'></select>"); 

     htmlDiv = "<div id=\"test"+ integer +"\"></div>" 

     var string ='test'+integer; 

     console.log(integer); 

    div = document.getElementById('bob'); 

    div.insertAdjacentHTML('beforeend', htmlDiv); 

    angular.element(document.getElementById('test'+integer)).append(selectElement); 

    integer++; 

    $compile(selectElement)($scope); 
    } 

    function removeElement(element) { 
    element && element.parentNode && element.parentNode.removeChild(element); 
} 


    $scope.changeTopics = function(){ 

     removeElement(document.getElementById("test"+ (integer-1))); 
    delete $scope.options.splice(integer,1); 
     if(integer>0) 
     integer--; 
      console.log(integer); 

    } 
    $scope.ampm = 0; 
    $scope.options = [ 
     [{ 
      "friendName": "Escobar", 
      "points": "200" 
     }, { 
      "friendName": "Pedro", 
      "points": "200" 
     }], 
     [{ 
      "friendName": "Cicero", 
      "points": "200" 
     }, { 
      "friendName": "Ciclano", 
      "points": "200" 
     }], 
     [{ 
      "friendName": "Jeremias", 
      "points": "200" 
     }, { 
      "friendName": "Boça", 
      "points": "200" 
     }], 
     [{ 
      "friendName": "Leite com pera", 
      "points": "200" 
     }, { 
      "friendName": "Rato borrachudo", 
      "points": "200" 
     }] 
    ]; 

} 

Fiddle

Я была помощь другу, чтобы открыть для себя $ компиляции. Благодарю.