AngularJS 1.0 - Masked Input Widget

index.html

 <input ng-model="contact.phone" ui-mask='"(9999) 9999 9999"' placeholder="(01234)-5678-8901" required />

widgets.coffee

Widgets = angular.module('WidgetModule', [])

Widgets.directive 'uiMask', ()->
  require: 'ngModel'
  scope:
    uiMask: 'evaluate'
  link: ($scope, el, attrs, controller)->
    $(el).mask($scope.uiMask)

    # Add a parser that only allows the model value through if the mask is valid
    controller.$parsers.push (value)->
      isValid = $(el).data('mask-isvalid')
      controller.$setValidity('mask', isValid)
      value = if isValid then el.mask() else null

    # When the element blurs, update the viewvalue
    $(el).bind 'blur', ()->
      $scope.$apply ()->
        controller.$setViewValue(el.mask())