rockonyu/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="todoApp">
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<h2>Todo</h2>
    <div ng-controller="TodoListController as todoList">
      <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
      [ <a href="" ng-click="todoList.archive()">archive</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in todoList.todos">
          <label class="checkbox">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </label>
        </li>
      </ul>
      <form ng-submit="todoList.addTodo()">
        <input type="text" ng-model="todoList.todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>


      <h3>React Compoment</h3>
      <todo-app-react items="todoList.todos" />
    </div>

</body>
</html>

## index.jsx
class TodoApp extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const items = this.props.items.map(x =>
      <li key={x.text}>{x.text}</li>
    )
    return (<ul>{items}</ul>);
  }
};

angular.module('todoApp', [])
  .controller('TodoListController', function() {
    var todoList = this;
    todoList.todoText = "test";
    todoList.todos = [
      {text:'learn AngularJS', done:true},
      {text:'build an AngularJS app', done:false}];

    todoList.addTodo = function() {
      todoList.todos.push({text:todoList.todoText, done:false});
      todoList.todoText = '';
    };

    todoList.remaining = function() {
      var count = 0;
      angular.forEach(todoList.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };

    todoList.archive = function() {
      var oldTodos = todoList.todos;
      todoList.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) todoList.todos.push(todo);
      });
    };
  })
  .directive("todoAppReact", function() {
    return {
      restrict: 'E',
      scope: {
        items: '=',
      },
      template: '<div></div>',
      link: function(scope, element, attrs) {

        scope.$watchCollection('items', function() {
          // all the code here...
          ReactDOM.render(
            <TodoApp items={scope.items} />,
            element[0]
          );
        });

      }
    };
  });
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body ng-app="todoApp">
	<script src="https://fb.me/react-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
	<h2>Todo</h2>
	<div ng-controller="TodoListController as todoList">
	<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
	[ <a href="" ng-click="todoList.archive()">archive</a> ]
	<ul class="unstyled">
	<li ng-repeat="todo in todoList.todos">
	<label class="checkbox">
	<input type="checkbox" ng-model="todo.done">
	<span class="done-{{todo.done}}">{{todo.text}}</span>
	</label>
	</li>
	</ul>
	<form ng-submit="todoList.addTodo()">
	<input type="text" ng-model="todoList.todoText" size="30"
	placeholder="add new todo here">
	<input class="btn-primary" type="submit" value="add">
	</form>


	<h3>React Compoment</h3>
	<todo-app-react items="todoList.todos" />
	</div>

	</body>
	</html>
	class TodoApp extends React.Component {
	constructor(props) {
	super(props);
	}

	render() {
	const items = this.props.items.map(x =>
	<li key={x.text}>{x.text}</li>
	)
	return (<ul>{items}</ul>);
	}
	};

	angular.module('todoApp', [])
	.controller('TodoListController', function() {
	var todoList = this;
	todoList.todoText = "test";
	todoList.todos = [
	{text:'learn AngularJS', done:true},
	{text:'build an AngularJS app', done:false}];

	todoList.addTodo = function() {
	todoList.todos.push({text:todoList.todoText, done:false});
	todoList.todoText = '';
	};

	todoList.remaining = function() {
	var count = 0;
	angular.forEach(todoList.todos, function(todo) {
	count += todo.done ? 0 : 1;
	});
	return count;
	};

	todoList.archive = function() {
	var oldTodos = todoList.todos;
	todoList.todos = [];
	angular.forEach(oldTodos, function(todo) {
	if (!todo.done) todoList.todos.push(todo);
	});
	};
	})
	.directive("todoAppReact", function() {
	return {
	restrict: 'E',
	scope: {
	items: '=',
	},
	template: '<div></div>',
	link: function(scope, element, attrs) {

	scope.$watchCollection('items', function() {
	// all the code here...
	ReactDOM.render(
	<TodoApp items={scope.items} />,
	element[0]
	);
	});

	}
	};
	});