Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="App" ng-controller="AppController">

    <div editable-field editable-model="text" editable-filter="number:2"></div>

  </body>

</html>

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

app.controller('AppController', function($scope) {	
	$scope.text = "default";
});

app.directive('editableField', function() {
    return {
    	restrict: 'A',
    	replace: true,
      template: '<div>' +
      			    '	<input ng-model="editableModel" />' +
				        '	<div class="output">{{editableModel | editableFilter}}</div>' +
				        '</div>',
	    scope: {
          editableModel: '=editableModel',
          editableFilter: '=editableFilter'
      },
      controller: function($scope) {},
      link: function($scope, $element, $attrs, $filter) {
      	var input = $element.find('input');
      	input.bind('click', function () {
            this.select();
        });
      }
    };
});

/* Styles go here */