coding-kata demo

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

app.controller('MainCtrl', function($scope) {
  $scope.roman = '';
		var error = "Enter a Number between 1 and 3999";
		$scope.error = error;
		
		$scope.$watch('number', function(newValue, oldValue) {
		  $scope.generate(newValue);
		});
		
		//Function to generate roman representation and store it in scope
		$scope.generate = function(num) {
		    //Show the warning if number is out of range
			if(num === undefined || num < 1 || num > 3999){
				$scope.error = error;
				return;
			}
			
			$scope.error = "";
			//Floor the value as roman numerals don't deal with decimals.
			var n= Math.floor(num), val, roman= '' ,i = 0;
			var indianNumerals = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
			var romanSymbols= ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'];
			
			while(i < 13){
			    //Start checking from the highest number in the numerals list.
				val = indianNumerals[i];
				while(n >= val){
				   //Take out the value from the number we are converting to carry on n the loop.
					n -= val;
					//Get the corresponding symbol for the number and append it to result.
					roman += romanSymbols[i];
				}
				if(n === 0) $scope.roman = roman;
				++i;
			}
			$scope.roman = romanString;
		};
});

<!DOCTYPE html>
<html ng-App="myapp">
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="app.js"></script>
	  <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
    <script src="app.js"></script>
	</head>
	<body ng-controller="MainCtrl">
		<h1>Roman Number Finder</h1>
		<form class="form-inline" role="form">
			<div class="form-group">
				<input type="number" ng-model="number" class="form-control" id="number" placeholder="Enter Number">
			</div>
			<span ng-show = "roman.length > 0 && error.length == 0" class="alert alert-success">{{roman}}</span>
			<span ng-show= "error.length > 0" class="alert alert-error">{{error}}</span>
		</form>
	</body>
</html>

/* Put your css in here */