View doesn't updated on element event - angularjs

Question

I need show caret position of my editor in some place of website. I made directive and service to share variables between controller and directice. Inside directive I turned on events like "keyup", "mouseup" etc. This events fires, service is getting updated to correct values and angular controller see this value changed but view doesn't refreshed.
I quess that this event's doesn't inform angular to refresh view. How to do it properly? here is my code.
It can be important too that this directive called "EditorEvents" is placed in different place. Both has only common root (aren't nested)
class EditorEvents {
public link: (scope: IExpressionEditor, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
private service: DebugValuesService;
constructor(text: string, service: DebugValuesService) {
this.service = service;
EditorEvents.prototype.link = (scope: IExpressionEditor, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
element.val(text);
element.on("input propertychange", (event: JQueryEventObject) => {
console.log('INFO: expression changed, new value: ', element.val());
this.setServiceValues(scope, element);
});
element.on("keyup", (event: JQueryEventObject) => {
if (event.which >= 37 && event.which <= 40) {
console.log('INFO: caret changed, new value: ', EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]));
this.setServiceValues(scope, element);
}
});
element.on("mouseup", (evet: JQueryEventObject) => {
console.log('INFO: caret changed, new value: ', EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]));
this.setServiceValues(scope, element);
});
//this.setServiceValues(scope, element);
};
}
private setServiceValues(scope: IExpressionEditor, element: ng.IAugmentedJQuery) {
var cursor = EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]);
var text = element.val();
this.service.SetCursorPosition(cursor);
this.service.SetScriptLength(text.length);
this.service.Text = text;
}
private static GetCaretPosition(element: HTMLInputElement): number {
...
}
public static Factory(text: string) {
var directive = (service: DebugValuesService) => {
return new EditorEvents(text, service);
};
directive['$inject'] = [];
return directive;
}
}
and associated with this controller service
class DebugModeController extends BaseController<IDebugObject> {
constructor($scope: IDebugObject, service: DebugValuesService, $interval) {
super($scope, "DebugModeController");
$scope.IsDebugMode = () => Configuration.IsDebugMode;
$scope.Service = service;
}
}
This values should be visible here:
<div ng-controller="DebugModeController" class="debug-controller" ng-show="{{ IsDebugMode() }}">
<input disabled="disabled" type="hidden" ng-model="Service.ScriptLength" />
<input disabled="disabled" type="hidden" ng-model="Service.CursorPosition" />
<table>
<thead>
<tr>
<td>Name</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>Script length</td>
<td>{{ Service.ScriptLength }}</td>
</tr>
<tr>
<td>Cursor position</td>
<td>{{ Service.CursorPosition }}</td>
</tr>
</tbody>
</table>
</div>

Answer 1

I quess that this event's doesn't inform angular to refresh view. How to do it properly? here is my code.
You need to trigger angular 1.x dirty checking using a digest e.g. change:
element.on("mouseup", (evet: JQueryEventObject) => {
console.log('INFO: caret changed, new value: ', EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]));
to:
element.on("mouseup", (evet: JQueryEventObject) => {
console.log('INFO: caret changed, new value: ', EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]));
scope.$apply();