How to bind or add a string to an input field by clicking it in angular

Question

I want to add a string to the input field whenever users click in that, how can i do it in angular here is the html segment

<md-input-container class="md-icon-float md-block">
  <label>Dripo #id</label>
  <md-icon class="md-default-theme" class="material-icons">&#xE30E;</md-icon>
  <input ng-model="manageDripo.dripoData.dripoid" type="text" name="dripoid" ng-pattern="/^[A-Za-z0-9]+((,|-)[A-Za-z0-9]+)*[A-Za-z0-9]+$/" required>
  <a ng-repeat="driponame in driponames">{{driponame}}</a>
</md-input-container>

and ManageDripo Controller has

.controller('manageDripoCntrl',function ($http,$window,$location,$timeout,$mdDialog,$scope,Admin) {
  $scope.driponames = [DRIPO-123,DRIPO-8987];

  ....
});

Answer 1

Considering the two-way bidding of AngularJs and that yours has ng-model, you will need to have an ng-click on that insert the given string you want at the variable associated with the ng-model, in your case manageDripo.dripoData.dripoid.

So in the html, at input:

<input ng-model="manageDripo.dripoData.dripoid" ng-click="insertString()" type="text" name="dripoid" ng-pattern="/^[A-Za-z0-9]+((,|-)[A-Za-z0-9]+)*[A-Za-z0-9]+$/" required>

At the controller:

.controller('manageDripoCntrl',function ($http,$window,$location,$timeout,$mdDialog,$scope,Admin) {
  $scope.driponames = [DRIPO-123,DRIPO-8987];

  $scope.insertString = function () {
    $scope.manageDripo.dripoData.dripoid += 'The String you want';
  };
  ....
});