petebacondarwin/index.html

## index.html
<!doctype html>
<html>
  <title>Angular Upgrade 1.0</title>
  <style>
    user {
      background-color: lightyellow;
      border: 2px solid darkorange;
      display: inline-block;
      width: 150px;
      padding: 1em;
    }
    .border {
      border: solid 2px DodgerBlue;
    }
    .title {
      background-color: LightSkyBlue;
      padding: .2em 1em;
      font-size: 1.2em;
    }
    .content {
      padding: 1em;
    }
  </style>
<body ng-app="app" ng-controller="Index" >
  <upgrade-app user="person.name" onreset="person.name=''">
    Your name: <input ng-model="person.name">
    <hr>
    Greetings from {{person.name}}!
  </upgrade-app>
  <script src="https://code.angularjs.org/snapshot/angular.js"></script>
  <script src="index.js"></script>
</body>
</html>

## index.js
angular.module('app', [])


.controller('Index', function($scope) {
  $scope.person = {
    name: 'World'
  };
})


.directive('user', function() {
  return {
    restrict: 'E',
    scope: {
      handle: '@',
      reset: '&'
    },
    template:
      'User: {{handle}}' +
      '<hr>' +
      '<button ng-click="reset(this)">clear</button>'
  };
})


.directive('upgradeApp', function() {
	return {
		restrict: 'E',
		template:
      '<div class="border">' +
      '  <pane title="Title: {{user}}">' +
      '    <table cellpadding="3">' +
      '      <tr>' +
      '        <td><ng-transclude></ng-transclude></td>' +
      '        <td>{{user}}</td>' +
      '        <td><user handle="{{user}}" reset="reset(this)"></user></td>' +
      '      </tr>' +
      '    </table>' +
      '  </pane>' +
      '</div>',
    transclude: true,
    scope: {
      user: '=',
      reset: '&'
    }
  };
})


.directive('pane', function() {
  return {
    restrict: 'E',
    template:
      '<div class="border">' +
      '  <div class="title">{{title}}</div>' +
      '  <div class="content"><ng-transclude></ng-transclude></div>' +
      '</div>',
    transclude: true,
    scope: {
      title: '@'
    }
  };
});
	<!doctype html>
	<html>
	<title>Angular Upgrade 1.0</title>
	<style>
	user {
	background-color: lightyellow;
	border: 2px solid darkorange;
	display: inline-block;
	width: 150px;
	padding: 1em;
	}
	.border {
	border: solid 2px DodgerBlue;
	}
	.title {
	background-color: LightSkyBlue;
	padding: .2em 1em;
	font-size: 1.2em;
	}
	.content {
	padding: 1em;
	}
	</style>
	<body ng-app="app" ng-controller="Index" >
	<upgrade-app user="person.name" onreset="person.name=''">
	Your name: <input ng-model="person.name">
	<hr>
	Greetings from {{person.name}}!
	</upgrade-app>
	<script src="https://code.angularjs.org/snapshot/angular.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	angular.module('app', [])


	.controller('Index', function($scope) {
	$scope.person = {
	name: 'World'
	};
	})


	.directive('user', function() {
	return {
	restrict: 'E',
	scope: {
	handle: '@',
	reset: '&'
	},
	template:
	'User: {{handle}}' +
	'<hr>' +
	'<button ng-click="reset(this)">clear</button>'
	};
	})


	.directive('upgradeApp', function() {
	return {
	restrict: 'E',
	template:
	'<div class="border">' +
	' <pane title="Title: {{user}}">' +
	' <table cellpadding="3">' +
	' <tr>' +
	' <td><ng-transclude></ng-transclude></td>' +
	' <td>{{user}}</td>' +
	' <td><user handle="{{user}}" reset="reset(this)"></user></td>' +
	' </tr>' +
	' </table>' +
	' </pane>' +
	'</div>',
	transclude: true,
	scope: {
	user: '=',
	reset: '&'
	}
	};
	})


	.directive('pane', function() {
	return {
	restrict: 'E',
	template:
	'<div class="border">' +
	' <div class="title">{{title}}</div>' +
	' <div class="content"><ng-transclude></ng-transclude></div>' +
	'</div>',
	transclude: true,
	scope: {
	title: '@'
	}
	};
	});