Add a prefix/suffix to value of input tag

Using ng-model="data" in <input type="text"> binds the data with entire text field. This is not particularly useful in situations where you want only a portion of text(being displayed in text field) to get bind with the scope.

For instance, if you do

<input type="text" value="prefixText {{name}} suffixText" ng-model="name">

The input box will display whatever is in name(with no prefix/suffix text)

However, there's a workaround. Use ng-bind on the variable and mention prefix/suffix text separately in the value="..." attribute.

<input type="text" value="prefixText {{name}} suffixText" ng-bind="name">

Here's the demo