Soy nuevo en AngularJS y estoy tratando de crear una aplicación simple que me permita subir archivos a mi sitio web impulsado por Laravel. Quiero que el formulario me muestre la vista previa de cómo se verá el elemento cargado. Así que estoy usando ng-model para lograr esto y me he topado con lo siguiente:

Tengo una entrada con algunos estilos básicos de bootstrap y estoy usando corchetes personalizados para la plantilla de AngularJS (porque como mencioné, estoy usando Laravel con su sistema de cuchillas). Y necesito eliminar espacios de la entrada (mientras lo escribo) y reemplazarlos con guiones:

<div class="form-group"><input type="text" plaeholder="Title" name="title" class="form-control" ng-model="gnTitle" /></div>

Y luego tengo esto:

<a ng-href="/art/[[gnTitle | spaceless]]" target="_blank">[[gnTitle | lowercase]]</a>

Y mi app.js se ve así:

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

app.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

app.filter('spaceless',function(){
    return function(input){
        input.replace(' ','-');
    }
});

Me sale el siguiente error: TypeError: no se puede leer la propiedad 'reemplazar' de indefinido

Entiendo que necesito definir el valor antes de filtrarlo, pero no estoy seguro de dónde definirlo exactamente. Y también, si lo defino, no quiero que cambie mi marcador de posición.