Блог

 angular.module("myApp", []).controller("myController", function($scope) {
  $scope.value = '';

  $scope.keyList = [{
    id: 1,
    name: '1'
  }, {
    id: 2,
    name: '2'
  }, {
    id: 3,
    name: '3'
  }];

  $scope.modifyValue = function(item) {
    $scope.value = $scope.value   item.name;
  }
}); 

 .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100px;
  height: 100px;
}
.keys {
  display: flex;
  justify-content: space-between;
}
.key {
  width: 20px;
  height: 20px;
  background-color: grey;
  color: white;
  text-align: center;
}
.key:hover {
  background-color: darkgrey;
  cursor: pointer;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="wrapper" ng-app="myApp" ng-controller="myController">
  <div class="keys">
    <div class="key" ng-repeat="item in keyList" ng-click="modifyValue(item)">{{item.name}}</div>
  </div>
  <input ng-model="value">
  <button ng-click="value = ''">Clear</button>
</div>