AngularJS Input Mask

<html>

<head>
  <title>Angular Multiselect Checkbox Dropdown</title>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular-loader.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-cookies.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-touch.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-resource.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type='text/javascript' src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-include="'menu.html'"></div>
  <div ui-view="main"></div>
  <script type="text/ng-template" id="menu.html">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <span class="navbar-brand">Our Menu</span>
        </div>
      </div>
    </nav>
  </script>
  <script type="text/ng-template" id="state1.html">
    <div class="row container">
      <div class="col-lg-12">
        <form>
          <h3>ViewValue with dashes placed every (4) characters</h3>
          <input type="text" ng-model="vm.someInput" ng-model-options="{'debounce': 250 }" masked-input style="width: 100%; font-size: 1.3em" />
          <br/>
          <h3>ModelValue</h3>
          <pre>{{ vm.someInput }}</pre>
        </form>
      </div>
    </div>
  </script>
</body>

</html>

(function() {
  angular.module('myApp.directives', []);
  angular.module('myApp.controllers', []);

  var myApp = angular.module('myApp', [
    'myApp.controllers',
    'myApp.directives',
    'ngSanitize',
    'ui.bootstrap',
    'ui.router',
    'ui'
  ]);

  var maskedInput = function() {
    var directive = {
      restrict: 'EA',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        console.log("In link function");

        var addSpaces = function(value) {
          if (typeof(value) == typeof(undefined))
            return value;
          var parsedValue = value.toString()
            .replace(/[^\dA-Za-z]/g, '')
            .replace(/(.{4})/g, '$1-').trim()
            .toUpperCase()
            .replace(/-$/, '');
          return parsedValue;
        }

        var removeSpaces = function(value) {
          if (typeof(value) == typeof(undefined))
            return value;
          var parsedValue = value.toString().replace(/\s/g, '').replace(/-/g, '');
          return parsedValue;
        }

        var parseViewValue = function(value) {
          var viewValue = addSpaces(value);
          ngModel.$viewValue = viewValue;
          ngModel.$render();

          // Return what we want the model value to be
          return removeSpaces(viewValue);
        }

        var formatModelValue = function(value) {
          var modelValue = removeSpaces(value);
          ngModel.$modelValue = modelValue;
          return addSpaces(modelValue);
        }

        ngModel.$parsers.push(parseViewValue);
        ngModel.$formatters.push(formatModelValue);
      }
    };
    return directive;
  }


  maskedInput.$inject = [];
  angular.module("myApp.directives")
    .directive('maskedInput', maskedInput);

  var state1Ctrl = function($timeout) {
    var vm = this;
    vm.someInput = 11112223334545454543;
  };


  state1Ctrl.$inject = ['$timeout'];
  angular.module('myApp.controllers')
    .controller('state1Ctrl', state1Ctrl);

  myApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',

    function($locationProvider, $stateProvider, $urlRouterProvider) {

      $locationProvider.html5Mode(false);

      $urlRouterProvider.when('/', '/state1')
        .otherwise("/state1");

      $stateProvider.state('app', {
          abstract: true,
          url: '/',
          views: {
            'main': {
              template: '<div ui-view>/div>'
            }
          }
        })
        .state('app.state1', {
          url: 'state1',
          templateUrl: 'state1.html',
          controller: 'state1Ctrl',
          controllerAs: 'vm',
          reloadOnSearch: false
        })
    }
  ]);

  myApp.run(['$log', function($log) {
    $log.log("Start.");
  }]);
})()

multiselect {
    display: block;
}

    multiselect > .btn-group {
        min-width: 180px;
    }

    multiselect .btn {
        width: 100%;
        background-color: #FFF;
    }

        multiselect .btn.has-error {
            border: 1px solid #a94442 !important;
            color: #db524b;
        }

    multiselect .dropdown-menu {
        max-height: 300px;
        min-width: 200px;
        overflow-y: auto;
    }

        multiselect .dropdown-menu .filter > input {
            width: 99%;
        }

        multiselect .dropdown-menu .filter .glyphicon {
            cursor: pointer;
            pointer-events: all;
        }

    multiselect .dropdown-menu {
        width: 100%;
        box-sizing: border-box;
        padding: 2px;
    }

    multiselect > .btn-group > button {
        padding-right: 20px;
    }

        multiselect > .btn-group > button > .caret {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid black;
            right: 5px;
            top: 45%;
            position: absolute;
        }

    multiselect .dropdown-menu > li > a {
        padding: 3px 10px;
        cursor: pointer;
    }

        multiselect .dropdown-menu > li > a i {
            margin-right: 4px;
        }

.glyphicon-none:before {
    content: "\e013";
    color: transparent !important;
}

# AngularJS Input Mask

This is an Angular-based input mask that demonstrates using parsers and formatters.

### Links
  - [Blog](https://long2know.com/2015/07/angular-multiselect-dropdown/)
  - [Github](https://github.com/long2know/angular-directives-general)