Angular+JQ+Bootstrap
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
{{county}}
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
</div>
JavaScript
angular.module('myApp', []).directive('evently', function() {
return function(scope, elm, attrs) {
var events = scope.$eval(attrs.evently);
angular.forEach(events, function(value, key) {
elm.bind(key, function() {
scope.$apply(value);
});
});
};
});
function MyCtrl($scope) {
$scope.county = 0;
$scope.doCount = function(){
$scope.county += 1;
}
}