How to remove/clear scope variable on ng-change - angularjs

Question

I have a dropdown with a ng-change event handler:
<label>Person:</label>
<select class="form-control" ng-model="select" ng-change="change()">
<option value="0">a </option>
<option value="1">b </option>
<option value="2">c </option>
</select>
On change i assign data from an array to $scope.person:
$scope.change = function(){
$scope.person = $scope.persons[$scope.select];
};
The array:
$scope.persons = [
{'name': 'Peter'},
{'name': 'John'},
{'name': 'Mark'}
];
When a person is selected (for example $scope.select == 0/Peter) there is a possibility to add a value to that person ($scope.person.value) via radio buttons:
<label><input type="radio" ng-model="person.value" value="1"> Value 1 </label><br/>
<label><input type="radio" ng-model="person.value" value="2"> Value 2</label><br/>
<label><input type="radio" ng-model="person.value" value="3"> Value 3</label><br/>
When a value ($scope.person.value) is added to a person, and i change the dropdown I want to remove/clear that value. So that when you reselect that person in the dropdown $scope.person.value is undefined.
$scope.change = function(){
//This is not working
delete $scope.person;
// This is not working either
$scope.person.value = '';
$scope.person = $scope.persons[$scope.select];
};
I want to know how to clear the value stored in $scope.person.value on change of the dropdown. Now the variable is still defined when I reselect the person. Here is a working example.

Answer 1

I think the variable is still saved, you should remove the value by yourself:
$scope.change = function(){
delete $scope.person;
$scope.person = '';
$scope.person = $scope.persons[$scope.select];
//Remove the assigned value
delete $scope.person.value;
};

Answer 2

your problem is here,
$scope.person = $scope.persons[$scope.select];
when you do this, and then assign a 'value' property, you actually modify the object in the persons array. try below,
$scope.change = function() {
$scope.person = angular.copy($scope.persons[$scope.select]);
console.log($scope.person);
};
$scope.$watch('person.value', function(n) {
console.log(n);
});

Answer 3

As #Kevin Sanchez say, you need delete value from person.
Like this delete $scope.person.value;
Live example on jsfiddle.
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.persons = [{
'name': 'Peter'
}, {
'name': 'John'
}, {
'name': 'Mark'
}];
$scope.change = function() {
if ($scope.person)
delete $scope.person.value;
$scope.person = $scope.persons[$scope.select];
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<label>Person:</label>
<select class="form-control" ng-model="select" ng-change="change()">
<option value="0">a</option>
<option value="1">b</option>
<option value="2">c</option>
</select>
<br>
<br>{{ person }}
<br>
<br>
<label>
<input type="radio" ng-model="person.value" value="1">Option 1</label>
<br/>
<label>
<input type="radio" ng-model="person.value" value="2">Option 2</label>
<br/>
<label>
<input type="radio" ng-model="person.value" value="3">Option 3</label>
<br/>
</div>
</div>