add new select element whenever previous one is clicked in angularjs - angularjs

Question

I want to add new select list whenever the exisisting and which is last one is clicked.
I want to have a select list, a text box infront of it and remove option to remove the row.
So far I have added a view for the default select list which will be there when form opens i.e.
<div id="inputMaterialContainer">
<md-select aria-label="selectMaterial" ng-model="inputMaterial" ng-change="appendSelectOption()" md-on-open="loadMaterials()">
<md-option><em>None</em></md-option>
<md-option ng-repeat="material in inputMaterialArray" ng-value="material">{{material}}</md-option>
</md-select>
</div>
I have a controller for the form which is as follows
app.controller('AddPeopleDialogCtrl', AddPeopleDialogCtrl);
function AddPeopleDialogCtrl($scope, $timeout)
{
var $materialSelectHTML = "<md-select ng-change='appendSelectOption' ng-model='inputMaterialArray'><md-option><em>None</em></md-option><md-option ng-repeat='material in inputMaterial' ng-value='material'>{{material}}</md-option></md-select>";
$scope.materialArray.push($materialSelectHTML);
$scope.appendSelectOption = function(){
var materialContainer = angular.element(document.querySelector('#inputMaterialContainer'));
materialContainer.append($materialSelectHTML);
$compile($materialSelectHTML)($scope);
};
$scope.loadMaterials = function(){
return $timeout(function(){
$scope.inputMaterialArray = $scope.inputMaterialArray || ['sensor1','sensor2','sensor3','sensor4','plate1','plate2','material1','material2'];
}, 650);
};
}
But it fails to get the output as I need.

Answer 1

you should not use jquery in your angular application, you can do something like this when you are appending the md select.
Maintain an array of the select elements in your controller(just objects, not actual html elements) and render them using ng-repeat.
Whenever you want to add or delete just add or delete from the array in the controller and angular will do the rest.
In the html change to this
<div id="inputMaterialContainer">
<md-select aria-label="selectMaterial"
ng-model="inputMaterial"
ng-repeat="selectOption in materialSelectArray"
ng-change="appendSelectOption()"
md-on-open="loadMaterials()">
<md-option><em>None</em></md-option>
<md-option ng-repeat="material in inputMaterialArray"
ng-value="material">{{material}}</md-option>
</md-select>
</div>
And in the controller just initialize the array and add new object to it every time you want to append a new select
something like this
app.controller('AddPeopleDialogCtrl', AddPeopleDialogCtrl);
function AddPeopleDialogCtrl($scope, $timeout){
$scope.materialSelectArray = [
{
name:'select0'
}
]
$scope.appendSelectOption = function(){
$scope.materialSelectArray.push({
name:'select'+ $scope.materialSelectArray.length
})
};
$scope.loadMaterials = function(){
return $timeout(function(){
$scope.inputMaterialArray = $scope.inputMaterialArray || ['sensor1','sensor2','sensor3','sensor4','plate1','plate2','material1','material2'];
}, 650);
};
}