Angular directive to move between inputs and format - angularjs

Question

I have a directive that does several things to a group of six single digit text input:
1 Capitalize the input if the user enters a lower case alphabet character
2. Reject any non alphabet character
3. Move back one input if user presses backspace, and delete the previous character if the user presses backspace twice.
Items 1 and 2 work, but item 3 doesn't work as expected. Right now, backspace goes to previous input AND deletes the input in one step.
Here is the UPDATED code. How do I get #3 working as described?
Here's a Fiddle (caps not working in the Fiddle but works locally for me).
<input class="code-char" type="text" maxlength="1" ng-model="code[0]" capitalize>
<input class="code-char" type="text" maxlength="1" ng-model="code[1]" capitalize>
<input class="code-char" type="text" maxlength="1" ng-model="code[2]" capitalize>
.directive('capitalize', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var capitalize = function(inputValue) {
if (inputValue == undefined) inputValue = '';
var charString = inputValue.replace(/[^a-zA-Z]/g, ''); //to reject non-alphabet characters
var shouldDelete = false;
var shouldMoveBack = true;
element.bind('keyup', function(event) {
var key = event.keyCode;
if(key === 8) {
if(shouldDelete == true) {
shouldDelete = false;
element[0].value ='';
} else {
shouldDelete = true;
if(!scope.$first && shouldMoveBack == true) {
element[0].previousElementSibling.focus();
shouldMoveBack == false;
} else {
shouldMoveBack == true;
}
}
} else {
if(charString > '') element[0].nextElementSibling.focus();
}
});
var capitalized = charString.toUpperCase();
if (capitalized !== inputValue) {
modelCtrl.$setViewValue(capitalized);
modelCtrl.$render();
}
return capitalized;
}
modelCtrl.$parsers.push(capitalize);
capitalize(scope[attrs.ngModel]); // capitalize initial value
}
};
})

Answer 1

Instead of focusing on the previous sibling for the first case , You could prevent the default behaviour of backspace by doing event.preventDefault() and create a keypress event with keyCode of left arrow and trigger it manually for achieving the first case of #3 . For the second case , you could keep a counter to see if backspace is pressed for the second time and trigger the default behaviour. Check the below sample .
var count = 0;
var leftArrow = $.Event("keyup");
leftArrow.which = 37;//37 being the keycode of left arrow
element.bind('keyup', function (event) {
var key = event.keyCode;
// 37 , 8
if (key === 8) {// if it is backspace
count++;
if (count > 1) {
count = 0;
} else {
// prevent the default behaviour
event.preventDefault();
// create a left arrow keypress event
element.triggerHandler(leftArrow);
}
}
}