JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp" ng-controller="phoneCtrl">
   <input type="text" ng-model="data.phone">
   <br>
   <p phone-format-d = "data.phone"> </p>
   <p>{{data.phone | phoneFormatF}}</p>
</body>

JavaScript

angular
  .module('myApp',[])
  .controller('phoneCtrl',function($scope){
    	$scope.data = {
        phone:1234567890
      }
	})
  .factory('phoneFormatS',function(){
    return function(value){
        if(typeof value === 'number'){
           value = value + '';
        }else if(typeof value !== 'string'){
          return value;
        }
        return value.replace(/(\d{3})(\d{3})(\d{4})/,"$1-$2-$3");
    }
  })
  .directive('phoneFormatD',function(phoneFormatS){
    return {
      scope:{
        number : '=phoneFormatD'
      },
      link:function(scope,elem,attr){
        scope.$watch('number',function(newValue,oldValue){
          if(typeof newValue === 'undefined') return
          elem.html(phoneFormatS(newValue ));
        })
      }
    }
  })

  .filter('phoneFormatF',function(phoneFormatS){
     return function(number) {
       return phoneFormatS(number);
     } 
  })