Angular: Empty Fiddle

http://angularjs.org/

HTML

<div ng-controller="Controller as ctrl">
    <div ng-model='ctrl.number'>
    <div class='number' ng-repeat='num in ctrl.numbers' set-value-on-click='num'>{{num}}</div>
    </div>
    <h2>{{ctrl.number}}</h2>
</div>

CSS

.number {
    width: 50px;
    height: 20px;
    text-align: center;
    background: #DDD;
    margin: 2px;
}

h2 {
    margin-top: 20px;
    clear: both;
}

JavaScript

var app = angular.module('myApp',[]);

  app.directive('setValueOnClick', function () {
    return {
      restrict: 'A',
      require: '^ngModel',
      scope: {
        setValueOnClick: '='
      },
      link: function (scope, elem, attrs, ngModelCtrl) {
        elem.on('click', function () {
          scope.$apply(function () {
            ngModelCtrl.$setViewValue(scope.setValueOnClick);
          });
        });
      }
    };
  });
function Controller($scope) {
    this.numbers = [1, 2, 3, 4, 5];
    this.number = 0;
}