I am adding dropdown on click of a button . The Model of these dropdowns are same when I am adding it to DOM .
There is a list of items which is creating dropdowns using ng-repeat . This list of items are pushed with new item on button click .
Now while adding a new dropdown to the list the model is the same everytime
when I change any drop downs , it is changing all others also .
What I am looking for :
When I add a new item to the list , (that item will be shown as a dropdown on UI using ng-repeat) although the model of the item being added in the list are same, items selected in one dropdown should not reflect in other.
I understand MVC and how model updates views in angular. This might be simple , However I am finding it tough for now.
Please provide your valuable help.
<div style="border:5px solid grey;" ng-controller="myCtrl" >
<div ng-repeat="li in list track by $index">
<span ng-bind-html="li"></span>
</div>
<input type="button" ng-click="addNewDropDown()" value="Add New Dropdown">
</div>
And app code is :
(function (){
var app = angular.module('ruleApp', []);
app.config(['$sceProvider', function($sceProvider) {
$sceProvider.enabled(false);
}]);
app.controller('myCtrl', function($scope) {
$scope.names=['a','b','c','d'];
var dropdown="<select><option ng-repeat="+"x in names"+">{{x}}</option></select>";
$scope.list=[dropdown];
$scope.addNewDropDown=function(){
var newDD="<select><option ng-repeat="+"x in names"+">{{x}}</option></select>";
$scope.list.push(newDD);
};
});
})()
