phonenumberModule

Formats the phonenumber as (222) 333-4444 within the input element Binds only the number 2223334444 to the model Can use either the directive or filter as stand alone items.

HTML

<div ng-controller="phoneController">
    <input type="text" ng-model="inputValue">
</div>

JavaScript

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

app.controller('phoneController', function($scope, $filter) {
			$scope.inputValue = $scope.phonenumberModel;
 
			$scope.$watch('inputValue', function(value, oldValue) {
				
				value = String(value);
				var number = value.replace(/[^0-9]+/g, '');
				$scope.phonenumberModel = number;
				$scope.inputValue = $filter('phonenumber')(number); // direct using of filter in controller
        console.log($scope.inputValue);
			});
});

app.filter('phonenumber', function() {
	    return function (number) {
	        if (!number) { return ''; }
 
          number = String(number);
          var formattedNumber = number;

          var code = (number[0] == '7' || '8') ? '+7 ' : '';
          number = number[0] == '7' || '8' ? number.slice(1) : number;

          var area = number.substring(0,3);
          var front = number.substring(3, 6);
          var mid = number.substring(6, 8);
          var tail = number.substring(8, 10);

          if (front) {
            formattedNumber = (code + "(" + area + ") " + front);	
          }
          if (mid) {
            formattedNumber += ("-" + mid);
          }
          if (tail) {
            formattedNumber += ("-" + tail);
          }
          return formattedNumber;
          };
});