Restrict Special Characters in HTML & AngularJs

Question

 ` ~ ! @ # $ % ^ & * ( ) _ + = { } | [ ] \\ : \' ; \" < > ? , . /

I want to restrict the above mentioned special characters and numbers i

Answer 1

Use Directives to restrict Special characters: 

 angular.module('scPatternExample', [])
      .controller('scController', ['$scope', function($scope) {
      }])
    .directive('restrictSpecialCharactersDirective', function() {
         function link(scope, elem, attrs, ngModel) {
              ngModel.$parsers.push(function(viewValue) {
                var reg = /^[a-zA-Z0-9]*$/;
                if (viewValue.match(reg)) {
                  return viewValue;
                }
                var transformedValue = ngModel.$modelValue;
                ngModel.$setViewValue(transformedValue);
                ngModel.$render();
                return transformedValue;
              });
          }

          return {
              restrict: 'A',
              require: 'ngModel',
              link: link
          };      
      });

In Html: