Forms - input placeholder attribute

Our website has the following HTML (simplified here for clarity):

<label>Event Title</label>
<input type="text" placeholder="Search...">

We use Bootstrap v3.3, AngularJS, React and a mixture of things.
The placeholder attribute is part of an HTML5 spec. It displays 'Search...' in light grey within the text box until a user types something.
It is the browser displaying the placeholder in its internal rendering mechanism, there is no additional JS/CSS making the placeholder happen.

In the example above I used 'Search...' but we use all sorts of phrases throughout our app depending on context.

LocalizeJS is not picking this phrase up at all.
What's the best way to proceed to have the placeholder translated?

I thought about a rough solution which would be some kind of $.ready() style function executed on document load where:

For each HTML element that is an input and has attribute placeholder
1. get the value of placeholder
2. make a Localize.translate() call to translate that value
3. use some jQuery to re-set the placeholder attribute to the new value
It feels a little rough and gross and I wonder if there is a mechanism that would allow us to do this. I keep thinking somebody else must have come across this problem.

Thanks for the advice,
Tommaso, Edinburgh (Scotland)