AngularJS - ng-change and spacebar

I have a function that is called when a textarea's value is changed. It works great, except when the spacebar is pressed, then nothing is called. Is there a way to activate this? Technically, the content is changing, and I would like the function to be called regardless.

I am attaching a fiddle with the code. You can see the $scope.log array does not push a new element when the spacebar is pressed (enter key as well), but it does with any other key that is not white space.

Sample fiddle: http://jsfiddle.net/UJWLN/4/

You can use the directive ng-trim in your input and set it to false, like this:

<textarea ng-change="changeFunction()" ng-model="myModel" ng-trim="false"></textarea>

But this won't work for every case. If you want something to be executed on every single keystroke, try with a custom directive. I wrote one for you:

http://jsfiddle.net/UJWLN/6/

myApp.directive('ngKeystroke', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            elem.bind("keyup", function(){
                scope.log.push('called');
                scope.$digest(); 
            });
        }
    };
});

Better try with this jsfiddle

html

<div ng-controller="MyCtrl">
    <textarea key-listener="changeFunction()" ng-model="myModel"></textarea>
    <div>{{log}}</div>
</div>

javascript

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

function MyCtrl($scope) {
    $scope.log=[];
    $scope.changeFunction=function(){
        $scope.log.push('Called');
    }
}

myApp.directive('keyListener', function() {
    return function(scope, elm, attrs) {
        elm.bind("keyup", function(event) {
            scope.$apply(attrs.keyListener);
        });
    };
})