How to create dynamic ng-model bindings , using dynamic templates - angularjs

Question

so following is my Dynamically created template, it has an issue, when i add my template, it brings values from the previous DOM. Where was i want new to be empty.
Following is my HTML file, and my-custom-row-template is where i am repeating my template, now i assume that $index will create a new index, and values/DOM wouldn't repeat.
<section class="main_container">
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/></th>
<th scope="col">Setup Responses</th>
<th>Add Condition</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td scope="col">
<input type="checkbox" ng-model="personalDetail.selected"/>
</td>
<td scope="col" class="col-xs-10">
<div ng-repeat="condition_set in conditions track by $index" my-custom-row-template></div>
</td>
</td>
<td scope="col">
<input type="button" value="Add Condition" ng-click="addCondition()"
class="btn btn-primary addnew"/>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button"
class="btn btn-danger pull-right"
ng-click="remove()" value="Remove">
<input type="button" class="btn btn-primary addnew pull-right" value="Add New" ng-click="addNew()">
<input type="submit" class="btn btn-primary pull-right" value="Save">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</span>
And this is my template code
<div class="col-xs-8 pull-left">
<div class="row form-group">
<!--<select ng-model="response.condition" style="color: black;">-->
<!--<option>Response Message</option>-->
<!--<option>IF</option>-->
<!--<option>Else</option>-->
<!--</select>-->
<select ng-model="selectedCondition[$index]">
<option ng-repeat="x in conditions.condition_set" value="{{x.name}}">{{x.value}}</option>
</select>
<input ng-show="selectedCondition=='0'" type="text" class="form-control"
ng-model="personalDetail[$index].message"/>
<input ng-show="selectedCondition=='1'" type="text" class="form-control"
ng-model="conditions[$index].response"/>
<input ng-show="selectedCondition=='2'" type="text" class="form-control"
ng-model="conditions[$index].elseMessage"/>
<select ng-show="selectedCondition=='1'" ng-model="goToStepOrNew">
<option ng-repeat="x in conditions[$index].create_new_conditions" value="{{x.name}}">{{x.value}}</option>
</select>
<input type="button" value="Remove Condition" ng-click="remove_condition($index)" class="btn btn-danger"/>
</div>
</div>
And this is how i am handling it within my controller
$http({
method: "POST",
url: "team_lead_showed_contacts/ajax",
data: $.param(obj),
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
transformResponse: [function (data) {
var str = '';
str = data.toString();
str = str.replace(/\\/g, 0);
return str;
}]
}).then(function (response) {
//debugger;
$scope.campaigns = JSON.parse(response.data);
$scope.personalDetails = [
{
'add_tempalte': '<div my-custom-row-template> </div>',
}
];
$scope.addNew = function (personalDetail) {
$scope.personalDetails.push({
'add_template': '<div my-custom-row-template> </div>',
});
};
function triggerNewRow($scope) {
if ($scope.goToStepOrNew == 0) {
}
}
$scope.remove = function () {
var newDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function (selected) {
if (!selected.selected) {
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function (personalDetail) {
personalDetail.selected = $scope.selectedAll;
});
};
$scope.conditions = [];
$scope.conditions.push('myCustomRowTemplate');
$index = 0;
$scope.addCondition = function () {
$scope.conditions.push('myCustomRowTemplate');
};
$scope.conditions.condition_set = [
{name: 0, value: 'Response Message'},
{name: 1, value: 'IF'},
{name: 2, value: "ELSE"}
];
$scope.conditions.create_new_conditions = [
{name: 0, value: 'Create Step'},
];
$scope.remove_condition = function (element) {
$scope.conditions.splice(element, 1);
// console.log(element);
};
});
For Reference i am attaching an image to give an idea, to what happens when i copy Add New. Copy of already present Elements is pushed into the DOM.
EDIT
Tried some thing like this following Kinda same issue like this post
but no effect.
$scope.personalDetails = [
{
'add_template': '<div my-custom-row-template> </div>',
}
];
var newStep = angular.copy($scope.personalDetails);
$scope.addNew = function (personalDetail) {
$scope.personalDetails.push(
newStep
);
};