<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="appCtrl">
    <h3>Parent</h3>
		<input ng-model="userInfo.firstName">
		<br/>
		<input ng-model="userInfo.lastName">
		<br/>
		<input ng-model="salary">
		<hr/>

		<name-editor user-info="userInfo" salary="salary"></name-editor>
    
    <script>
			(function() {
				angular
					.module('app', [])
					.controller('appCtrl', function($scope) {
						$scope.userInfo = {
							firstName: 'Nam',
							lastName: 'Tran'
						}

						$scope.salary = 3000;


					})
					.directive('nameEditor', function() {
						return {
							scope: {
								userInfo: '<',
								salary: '<'
							},
							template: [
							  '<h3>Child</h3>',
								'<input ng-model="userInfo.firstName">',
								'<br/>',
								'<input ng-model="userInfo.lastName">',
								'<br/>',
								'<input ng-model="salary">'
							].join(''),
							link: function(scope) {

							}
						}
					})
			})();
		</script>
  </body>

</html>
// Code goes here

/* Styles go here */