How to change placeholder for single textbox in angular?

Question

Hi Friends I have radiobuttons "%" and "Count"

If i click "%" then In the text box "%" Should be placeholder

If i click "Count" Then "Count" Should be placeholder for same textbox

Here Fiddle link:http://jsfiddle.net/qbauuzj2/

Html

       <div class="winner-par">
        <p>Winner Parameter</p>
        <div class="onoffswitch-green2">
          <input type="radio" id="radios5" name="radiosg5" class="SwitchOn" value="true" checked 
         ng-click="radioChecked()">
          <label for="radios5">%</label>
          <input type="radio" id="radios6" name="radiosg5" class="SwitchOff" value="false" ng-click="radiounChecked()">
          <label for="radios6">Count</label>
        </div>
      </div>
      <input type="text">

Answer 1

You can dynamically update DOM-elements

<div ng-app="" ng-controller="Controller">
    ...
    <input type="text" placeholder="{{placeholder}}" />
</div>

Your controller

function Controller($scope) {

    $scope.radioChecked = function ()
    {
        $scope.placeholder="%";
        $scope.apply();
    }

    $scope.radiounChecked = function ()
    {
        $scope.placeholder="Count";
        $scope.apply();
    }
}

---

http://jsfiddle.net/z21qfwqz/14/

If you use >1.1.3 angular version - better way for this ng-attr-placeholder(thanks for Teq1)

<input type="text" ng-attr-placeholder="{{placeholder}}" />

Look at this

Answer 2

Follow this example:

Change value of input placeholder via model?

Depending on which is selected, change the value of the "placeholder" variable in your scope, then bind that variable to the placeholder attribute on the element.