Filter not working with options

Question

I try to translate the option items with custom filter based on Angular 1.4.8

I created a simple one to test if any item can append the string "123"

app.filter('mytranslation', ['$rootScope', function($rootScope) {
  return function(t_str) {
    return t_str + "123";
  };
}]);

However, I got this anbiguous exception,

Error: [$injector:unpr] Filter

And other tutorials about NG filter are not working as well.

• AngularJS : ng-repeat filter when value is greater than
• How can I add internationalization to a select drop down with AngularJS?

both haml code not work too

%select{"ng-options" => "item.id as item.from for item in routes | mytranslation ", "ng-model"=>"selected"}
%select{"ng-options" => "item.id as (item.from | mytranslation ) for item in routes  ", "ng-model"=>"selected"}

Exception on console

    Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=mytranslationFilterProvider%20%3C-%20mytranslationFilter
        at Error (native)
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:7:416
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:42:121
        at Object.d [as get] (http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:40:92)
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:42:195
        at Object.d [as get] (http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:40:92)
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:150:129
        at W (http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:112:209)
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:110:334
        at n (http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:8:333) <select ng-model="selected" ng-options="item.id as item.from for item in routes | mytranslation " class="ng-pristine ng-untouched ng-valid">

Update Version 2

routes (array of object)

[
{
from: "BANGKOK",
to: [
"KAOHSIUNG",
"TAIPEI",
"OSAKA",
"TOKYO",
"SINGAPORE"
]
},
{
from: "CHIANGMAI",
to: [
"TAIPEI"
]
},
]

the fileter was not triggered

app.filter('mytranslation', function(data){
    return data + "123";
});

Generated HTML (Not as my expectation)

    <select ng-model="selected" ng-options="item.id as item.from for item in routes | filter:mytranslation" class="ng-pristine ng-untouched ng-valid">
        <option label="BANGKOK" value="undefined:undefined">BANGKOK</option>
        .....
        <option label="CHIANGMAI" value="undefined:undefined">CHIANGMAI</option>

Expectation result should be

    <select ng-model="selected" ng-options="item.id as item.from for item in routes | filter:mytranslation" class="ng-pristine ng-untouched ng-valid">
        <option label="BANGKOK" value="BANGKOK">BANGKOK123</option>
        .....
        <option label="CHIANGMAI" value="CHIANGMAI">CHIANGMAI123</option>    

Answer 1

UPDATE

Your don't need the specify filter: in the html. Just specify the filter name(mytranslation) there. Like this

<select ng-model="selected" ng-options="item.id as (item.from | mytranslation) for item in routes" class="ng-pristine ng-untouched ng-valid"></select>

And your filter should be like this in JS

app.filter('mytranslation', function(){
    return function(data){
        return data + "123";
    }
});

Created a working JSFiddle here http://jsfiddle.net/WfuAh/151/

Answer 2

invalid syntax version

app.filter('mytranslation', function(data){
    return data + "123";
});

valid version

app.filter('mytranslation', function(){
  return function(data){
    return data + "123";
  }
});