Angular: 1.0.0 Mask new without scope

http://angularjs.org/

by abuhamzah

HTML

<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="https://raw.github.com/twarogowski/angular-contrib/master/js/lib/jquery.maskedinput-1.3.js"></script>
<div ng-controller="MyCtrl">
    <span>Type numbers here -></span>
    <input type="text" ui-mask="{{myMask}}" ng-model="number"  /> 
    <button  ng-click="setField()">Press here to set the field from the model</button>
    <pre>{{number}}</pre>
    <button ng-click="myMask = '(9).99-99'">Press here to change mask</button>
</div>

JavaScript

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


myApp.directive('uiMask', function() {
    return {
        require: 'ngModel',
        
        link: function($scope, element, attrs, controller) {
            var mask;
            
            // Update the placeholder attribute from the mask
            var updatePlaceholder = function() {
                if ( !attrs.placeholder ) {
                    element.attr('placeholder', mask.replace(/9/g, '_'));
                }
            };

            // Render the mask widget after changes to either the model value or the mask
            controller.$render = function() {
                var value = controller.$viewValue || '';
                console.log('Rendering value: ', value);
                console.log('Rendering mask: ', mask);
                element.val(value);
                if ( !!mask ) {
                    element.mask(mask);
                }
                updatePlaceholder();
            };
            
            // Keep watch for changes to the mask
            attrs.$observe('uiMask', function(maskValue) {
                console.log('mask is ', maskValue);
                mask = maskValue;
                controller.$render();
            });
            
            // Check the validity of the masked value
            controller.$parsers.push(function(value) {
                var isValid;
                isValid = element.data('mask-isvalid');
                controller.$setValidity('mask', isValid);
                if (isValid) {
                    return element.mask();
                } else {
                    return null;
                }
            });
            
            // Update the model value everytime a key is pressed on the mask widget
            element.bind('keyup', function() {
                console.log('change');
                $scope.$apply(function() {
                    controller.$setViewValue(element.mask());
                });
            });
      ...