angularjs - Custom filter not working angular js -

i creating custom filter in angular js html,

<div class="box-body">  <div class="form-group">     <label>page-title:</label>     <input type="text" required value="" data-ng-model="title" name="page_title" class="form-control" id="" placeholder="enter page title">                      </div>  <div class="form-group">     <label>page-alias:</label>     <input type="text" value="@{{ title | replacespace}}" name="page_alias" class="form-control" id="" placeholder="auto-generated if left blank"> </div> 

this angular js code

var app = angular.module('customangular', []); app.controller('customctrl', function ($scope) {     app.filter('replacespace', function () {         return function (input) {             return input.replace(/ /g, '-').tolowercase();         };     }); }); 

the filter not working , error in console.

error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=slugifyfilterprovider%20%3c-%20slugifyfilter     @ error (<anonymous>) 

if use filter: infront of filter name donot errors in console it's still not working.

<input type="text" value="@{{ title | filter:replacespace }}" name="page_alias" class="form-control" id="" placeholder="auto-generated if left blank"> 

you should define filter outside of controller , not use filter: has different meaning, that's correct way use filter

<input type="text" value="@{{ title | replacespace }}" name="page_alias" class="form-control" id="" placeholder="auto-generated if left blank"> 

although should either initialize model $scope.title = '' or place check in filter run replace when input defined, otherwise js errors

filter: used filter array model, , when pass filter it nothing