Uneditable trailing text in textarea - angularjs

Question

I have been fighting with this for a couple of days to no avail.
I need to have a textarea with uneditable text trailing on the end.
Here is a fiddle with the text in the beginning of the text area, the requirement is to have it on the end. Anyone have any insight how to achieve this?
http://jsfiddle.net/codemonkeytony/3ew5h6bf/7/
var partialApp = angular.module("partialApp", []);
partialApp.directive('partialReadonly', function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
elem.on('keypress, keydown', function (event) {
console.log(scope.bbb);
console.log(event);
var readOnlyLength = attrs["partialReadonly"].length;
if ((event.which != 37 && (event.which != 39)) && ((elem[0].selectionStart < (scope.bbb - readOnlyLength )) || ((elem[0].selectionStart != (scope.bbb - readOnlyLength )) && (event.which == 8)))) {
event.preventDefault();
}
});
$(window).load(function () {
elem[0].value = attrs["partialReadonly"];
});
}
};
});

Answer 1

I have updated the logic on keypress event handler. Check this updated fiddle, if you want this behaviour.
partialApp.directive('partialReadonly', function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var readOnlyText = attrs["partialReadonly"];
var readOnlyLength = readOnlyText.length;
var ele = elem[0];
elem.on('keypress, keydown', function (event) {
var actualTextLength = ele.value.length - readOnlyLength;
var readOnlyTextStartIndex = actualTextLength;
if (elem[0].selectionStart > readOnlyTextStartIndex) {
event.preventDefault();
}
});
$(window).load(function () {
elem[0].value = attrs["partialReadonly"];
});
}
};
});