<!doctype html>
<html data-ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="filters.js"></script>
    <script src="main.js"></script>
  </head>
  <body data-ng-controller="MainController">
  
    <label for="percent">Your value</label>
    <input id="percent" data-ng-model="Value" />
    as a percentage
    {{Percentage}}

  </body>
</html>
'use strict';

function MainController($scope, $filter) {

  $scope.$watch('Value', function(){
    $scope.Percentage = $filter('percent')($scope.Value);
  });  
  
}

MainController.$inject = ['$scope', '$filter'];
angular.module('app.filters', [])

  			.filter('percent', function () {
					return function (text, length, end) {
						if (text == null || text == '') text = '0';
						text = parseInt(text) / 100;
						return text.toFixed(2);

					};

				});
'use strict';

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