javascript - Auto capitalisation of input field using AngularJS -

i have directive on input field licence key validates against server side api. works fine want licence key auto hyphenate , appear capitalized.

i.e. user typing in abcd1234qwer5678 have appear abcd-1234-qwer-5678. (i first trying auto capitalisation working, ill try hyphenating)

i have tried couple of things, firstly watch within controller

$scope.$watch('licencekey', function (newvalue, oldvalue) {     $scope.$apply(function () {         $scope.licencekey = newvalue.touppercase();     }) }); 

and tried using second directive applied input

myapp.directive('capitalize', function() {    return {      require: 'ngmodel',      link: function(scope, element, attrs, modelctrl) {         var capitalize = function(inputvalue) {            if(inputvalue == undefined) inputvalue = '';            var capitalized = inputvalue.touppercase();            if(capitalized !== inputvalue) {               modelctrl.$setviewvalue(capitalized);               modelctrl.$render();             }                      return capitalized;          }          modelctrl.$parsers.push(capitalize);          capitalize(scope[attrs.ngmodel]);  // capitalize initial value      }    }; }); 

the first 1 seems nothing , second seems replace existing text after short delay. html so

<input type="text" name="licencekey" ng-model="licencekey"      ng-model-options="{ debounce : { 'default' : 150 } }" licence-key-validator /> 

what best way achieve want , why getting these issues?

what have noticed if use batarang inspect scope licencekey seems stay null until submit form. why not populated type input?

angular.module('licenceapp.controllers', [])     .controller('licencecontroller', ['$scope', 'licenceapiservice', '$filter', function ($scope, licenceapiservice, $filter) {         $scope.licencekey = "";          $scope.$watch('licencekey', function (newvalue, oldvalue) {             $scope.$apply(function () {                 $scope.licencekey = newvalue.touppercase();             })         });         ... 

update

i have notice when use watch, text isnt capitalised until valid licence key (as validated licenceapiservice) capitalised when enter valid key in lower case. code below:

angular.module('licenceapp.directives', [])     .directive('licencekeyvalidator', function ($http, $q, licenceapiservice) {         return {             require: 'ngmodel',             link: function ($scope, element, attrs, ngmodel) {                 ngmodel.$asyncvalidators.licencekeyvalidator = function (licencekey) {                     var deferred = $q.defer();                      licenceapiservice.validatekey(licencekey).then(function (data) {                         if (data.data) {                             deferred.resolve();                         }                         else {                             deferred.reject();                         }                     }, function () {                         deferred.reject();                     });                      return deferred.promise;                 };             }         }     }); 

i managed create small function using filter created capitalizes , hyphenates, take , let me know if meets needs.

http://plnkr.co/edit/i8meuqjtuvlthp9wwabq?p=preview

code:

var app = angular.module("myapp", []);  app.controller('myctrl', ['$scope', '$filter', function($scope, $filter){    $scope.mytext = "";    $scope.update = function(){      $scope.mytext = $filter('myfilter')($scope.mytext);    };  }]);   app.filter('myfilter', function(){   return function(text){     if(!text)       return text;     else{       var toreturn = text;       toreturn = toreturn.touppercase().replace('', '');       if(toreturn.length > 4 && toreturn[4] !== "-")          toreturn = toreturn.substring(0, 4) + "-" + toreturn.substring(4);       if(toreturn.length > 9 && toreturn[9] !== "-")          toreturn = toreturn.substring(0, 9) + "-" + toreturn.substring(9);       if(toreturn.length > 14 && toreturn[14] !== "-")          toreturn = toreturn.substring(0, 14) + "-" + toreturn.substring(14);        return toreturn;      }   };  }); 

html:

<input ng-model="mytext" ng-change="update()"/>