Scope functions about ngreact HOT 2 CLOSED

var app = angular.module( 'app', ['react'] );

app.controller( 'mainCtrl', function( $scope ) {
  $scope.person = {
    fname: 'Clark', lname: 'Kent'
  }
  // add function to scope
  $scope.changeName = function() {
    $scope.person = { fname: 'Bruce', lname: 'Banner' };
  };
} );

var Hello = React.createClass( {
  propTypes: {
    fname: React.PropTypes.string.isRequired,
    lname: React.PropTypes.string.isRequired,
    changeName: React.PropTypes.func
  },

  onClick: function( e ) {
    // process event here

    // now call function from props 
    // this is the change name function declared on the controllers scope
    this.props.changeName();
  },

  render: function() {
    return <div>
       Hello {this.props.fname} {this.props.lname}
       <button onClick={this.onClick}>Change Name</button>
      </div>
    );
  }
} );

app.value( "Hello", Hello );

app.directive( 'hello', function( reactDirective ) {
  return reactDirective( Hello );
} );