Two-way data binding to an ngReact component

Question

Using ngReact, how does one elegantly set up a two-way data binding?

Let's say I have a simple React input component, which takes a value and fires onChange:

angular.module('app', []).value('SimpleInput', props => 
  <input type='text' 
         value={props.value}
         onChange{e => props.onChange(e.target.value)} />
)

Then from the AngularJS side, I would expect something like this to update value in the scope:

<react-component name="SimpleInput" 
                 props="{value: value, onChange: v => value = v}">
</react-component>

However, is there a more elegant way to set up the two-way binding to the AngularJS scope, akin to ng-model?

Answer 1

I don't think so. ngReact is merely a means to inject React components into an Angular framework; React was specifically designed to not have two-way data binding in favor of performance, so any implementation of that would necessarily be a work-around.

From the horse's mouth:

ngReact is an Angular module that allows React Components to be used in AngularJS applications. Motivation for this could be any of the following: You need greater performance than Angular can offer (two way data binding, Object.observe, too many scope watchers on the page) ...