JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app = "myApp" ng-controller="mainCtrl">

  <input type="text" ng-model='text' valid-tel>
</div>

CSS

body{
    background: none repeat scroll 0 0 #eee;
    color: #3e3333;
    font-family: fantasy;
    font-size: 25px;
    font-weight: 100;
    margin: 0 auto;
    width: 960px;

}

input,select{
    width: 100%;
    border: medium none;
    height: 30px;
    margin-top: 10px;
    padding-left: 5px;
    border-radius: 5px;
}
hr{
    color: #eee;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope){
    
});
app.directive('validTel', function () {
    return {
        require: '?ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }

            ngModelCtrl.$parsers.push(function (val) {
                var str = 0;
                
                var clean = val.replace(/(1){11,}|(2){11,}|(3){11,}|(4){11,}|(5){11,}|(6){11,}|(7){11,}|(8){‌​‌​11,}|(9){11,}|(0){11,}/g, '') ;
                if (val !== clean || str.startsWith) {
                    ngModelCtrl.$setViewValue(clean);
                    ngModelCtrl.$render();
                    console.log('hey');
                }
                return clean;
            });

            element.bind('keypress', function (event) {
                if (event.keyCode === 32) {
                    event.preventDefault();
                }
            });
        }
    };
});