Click button to copy text to another div with angularjs

Question

I have a list of Items with different button with them. Plunker

Quick View:

I want something like if I click on any of the buttons, related text will be copy to the div above. Also if I click on the button again it will removed from the Div.Same for each of the buttons. [I added manually one to show how it may display ]

I am not sure how to do that in Angular. Any help will be my life saver.

<div ng-repeat="item in csTagGrp">
    <ul>
      <li ng-repeat="value in item.csTags">
        <div class="pull-left">
          <button type="button" ng-class='{active: value.active && !value.old}' class="btn btn-default btn-xs">{{value.keys}}</button>
          <span>=</span>
        </div>
        <div class="pull-left cs-tag-item-list">
          <span>{{value.tags}}</span>
        </div>
      </li>
    </ul>
  </div>

Answer 1

You can use ng-click to put in your scope the selected value, and then display this value instead of "Win".

http://plnkr.co/edit/IzwZFtRBfSiEcHGicc9l?p=preview

<div class="myboard">
  <span>{{selected.tags}}</span>
</div>
...
<button type="button" ng-click="select(value)">{{value.keys}}</button>

Answer 2

The simplest thing would be to use $scope.tags object to store selected tags and add/remove them with the scope method similar to this:

$scope.tags = {};

$scope.toggleTag = function(tag) {
    if (!$scope.tags[tag]) {
        $scope.tags[tag] = true;
    }
    else {
        delete $scope.tags[tag];
    }
};

Demo: http://plnkr.co/edit/FrifyCrl0yP0T8l8XO4K?p=info