title: Trying to replace spaces with dashes using ng-model
body: <p>I'm new to AngularJS and trying to create a simple app that will allow me to upload files to my Laravel driven website. I want the form to show me the preview of what the uploaded item will look like. So I am using ng-model to achieve this and I have stumbled upon the following:</p>
  
  <p>I have an input with some basic bootstrap stylings and I am using custom brackets for AngularJS templating (because as I mentioned, I am using Laravel with its blading system). And I need to remove spaces from the input (as I type it) and replace them with dashes:</p>
  
  <pre><code>&lt;div class="form-group"&gt;&lt;input type="text" plaeholder="Title" name="title" class="form-control" ng-model="gnTitle" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And then I have this:</p>
  
  <pre><code>&lt;a ng-href="/art/[[gnTitle | spaceless]]" target="_blank"&gt;[[gnTitle | lowercase]]&lt;/a&gt;
  </code></pre>
  
  <p>And my app.js looks like this:</p>
  
  <pre><code>var app = angular.module('neoperdition',[]);
  
  app.config(function($interpolateProvider){
      $interpolateProvider.startSymbol('[[').endSymbol(']]');
  });
  
  app.filter('spaceless',function(){
      return function(input){
          input.replace(' ','-');
      }
  });
  </code></pre>
  
  <p>I get the following error:
  TypeError: Cannot read property 'replace' of undefined</p>
  
  <p>I understand that I need to define the value before I filter it, but I'm not sure where to define it exactly. And also, if I define it, I don't want it to change my placeholder. </p>