In Angularjs to assign ng-model for dynamically and read the values in Controller function

Question

I am trying to create a new rectangle when the user clicks add button. This rectangle would also have an input field and select for these fields I am trying to assign the ng-model dynamically and read the corresponding values in the controller.

HTML:

<button id="AddNewField" ng-click="AddNewField();" class="btn btn-success"> Add New </button>
<div ng-repeat="(key,value) in NewFieldValues">
    {{ value.ID }}
    <div style="width:250px;height:100px;border:1px solid #000;" draggable="true">
        <select ng-model="BusinessStep[value.ID]" ng-change="BusinessStepChange(value.ID)" class="form-control">
            <option ng-repeat="businessStep in businessSteps" value="{{ businessStep.value }}"> {{ businessStep.text }} </option>
        </select>
        <br/>
        <input type="text" ng-model="Events[value.ID]"></input>
    </div>
</div>

Angularjs: $scope.NewFieldValues = [];

$scope.FieldID          =   0;

$scope.AddNewField  =   function(){
    item            =   {};
    item["ID"]      =   $scope.FieldID;
    item["Fields"]  =   [];
    $scope.NewFieldValues.push(item);
    $scope.FieldID++;
}

$scope.BusinessStepChange   =   function(BusinessStepID){
    
    for(var bs=0; bs<$scope.NewFieldValues.length; bs++)
    {
        if($scope.NewFieldValues[bs].ID ==  BusinessStepID)
        {
            console.log($scope.NewFieldValues[bs]);
            console.log($scope.BusinessStep);
            $scope.NewFieldValues[bs]['Fields'].BusinessStep    =   "Hello"; //Read the value from corresponding select field
        }
    }       
}

How can I assign the ng-model field dynamically for each field in the rectangle and also how can I read them in the controller function

Answer 1

<button id="AddNewField" ng-click="AddNewField();" class="btn btn-success"> Add New </button>

<div ng-repeat="NewField in NewFieldValues">
    <div style="width:250px;height:100px;border:1px solid #000;" draggable="true">
        <select ng-model="Dynamic.BusinessStep[NewField.ID]" ng-change="BusinessStepChange(NewField.ID,'BusinessStep')" class="form-control">
            <option ng-repeat="businessStep in businessSteps" value="{{ businessStep.value }}"> {{ businessStep.text }} </option>
        </select>
        <br/>
        <input type="text" ng-model="Dynamic.ObjectCount[NewField.ID]" ng-blur="BusinessStepChange(NewField.ID,'EventCount')"></input>
    </div>
</div>


$scope.NewFieldValues       =   [];
$scope.FieldID              =   0;
$scope.Dynamic              =   {};

$scope.AddNewField  =   function(){
    item            =   {};
    item["ID"]      =   $scope.FieldID;
    item["Fields"]  =   [];
    $scope.NewFieldValues.push(item);
    $scope.FieldID++;
}

$scope.BusinessStepChange   =   function(BusinessStepID, Type){
    
    for(var bs=0; bs<$scope.NewFieldValues.length; bs++)
    {
        if($scope.NewFieldValues[bs].ID ==  BusinessStepID)
        {
            if(Type ==  'BusinessStep')
            {
                $scope.NewFieldValues[bs]['Fields'].BusinessStep    =   $scope.Dynamic.BusinessStep[BusinessStepID];
            }
            else if(Type    ==  'EventCount')
            {
                $scope.NewFieldValues[bs]['Fields'].NumberofElement =   $scope.Dynamic.ObjectCount[BusinessStepID];
            }               
            console.log($scope.NewFieldValues);
            break;
        }
    }       
}