Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-controller="MyController">
  <hello ng-if="component === 'hello'"><common></common></hello>
  <goodbye ng-if="component === 'goodbye'"><common></common></goodbye>
</div>

JavaScript

angular
	.module('myApp', [])
  .component('hello', {
  	template: '<h1>Hello, <ng-transclude></ng-transclude>!</h1>',
    transclude: true
  })
  .component('goodbye', {
  	template: '<h1>Goodbye, <ng-transclude></ng-transclude>!</h1>',
    transclude: true
  })
  .component('common', {
  	template: 'Lorem Ipsum.........'
  })
  .controller('MyController', ['$scope', function($scope) {
  	$scope.component = 'hello';
  }]);