Change angular $scope value when different radio button is clicked

Question

I am doing an angular project, I have tried to change scope values and element values by changing radio button. When radio button 1 is clicked I am getting value from server and saving it in scope and element. When I click radio button 2 all scope and element must be deleted. Emptied all scopes. But my problem is when I edit the input, and click radio button 2 , span value and place holder in input both are shown. The Span must not be shown. Here is my code.

index.html

<div class="row">
    <div class="col" style="border: none;">
      <ion-item class="item-checkbox" style="border: none;">
        <label class="checkbox">
<input type="radio" id="oldChecked" ng-value="true" ng-model="oldChecked" ng-click="showName()">
            </label> Radio 1
      </ion-item>
    </div>
    <div class="col" style="border: none;">

      <ion-item class="item-checkbox" style="border: none;">
        <label class="checkbox">
                <input type="radio" id="newChecked" ng-value="true" ng-model="newChecked" ng-click="deleteName()">
            </label> Radio 2
      </ion-item>

    </div>
  </div>
   <div class="col" style="width: 100%;">
  <label class="item item-input item-floating-label" style="
  border-left:  none;border-right: none;border-top:none;">
  <span class="input-label" style="text-align: left;">Name 
  <font style="color: #ef473a;font-size: 14px;">*</font>
  </span>
  <input type="text" placeholder="Name" ng-model="pName"
   id="pName" name="pName" required>
 </label>
        </div>

controller.js

$scope.showName=function(){
$http.post(WebServer_URL, data, config)
  .success(function (data, status, headers, config) {
    var x2js = new X2JS();
    var jsonOutput = x2js.xml_str2json(data);
    var myPatient = JSON.parse(jsonOutput.string);
    $scope.pName = myPatient[0].Pt_Name;
    document.getElementById('pName').value = myPatient[0].Pt_Name;
}).error(function (data, status, header, config) {
    console.log("Status: " + status);
  });
}

    $scope.deleteName=function(){
    $scope.pName="";
    document.getElementById('pName').value = "";
 }

Here is the image showing span and placeholder

Please help me on this issue . Thanks in advance guys.

Answer 1

// radio buttons should have same ng-model
<input type="radio" value="oldChecked" ng-model="myOption" ng-click="showName()">
<input type="radio" value="newChecked" ng-model="myOption" ng-click="deleteName()">
<input type="text" id="pName" ng-model="pName" placeholder="Name">

  <script type="text/javascript">
    var app=angular.module("test",[]);
    app.controller("testCtrl",function($scope){
    $scope.showName=function(){
      $scope.pName = "Hello";
    }
    $scope.deleteName=function(){
     $scope.pName="";
    }
});