AngularJS template

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

app.controller('MainCtrl', function($scope) {
  $scope.foo = {
    'bar' : 123,
    'name' : 'foo'
  };
  
  $scope.bar = {
    'foo': 456,
    'name': 'something else'
  };
});

app.directive('whatIsInThese', ['$compile', function($compile) {
	return function(scope, elem, attrs) {
    //getting a list of space-separated property names 
    //from the attribute.
		var these = attrs.whatIsInThese.split(' '),
		
		//start creating an html string.
			html = '<pre>';
			
		//append a bunch of bound values from the list.
		angular.forEach(these, function(item) {
			html += '{{' + item + '| json}}\n\n';
		});
		
		//create an angular element. (this is our "view")
		var el = angular.element(html),
		
		//compile the view into a function.
			compiled = $compile(el);
			
		//append our view to the element of the directive.
		elem.append(el);
		
		//bind our view to the scope!
		//(try commenting out this line to see what happens!)
		compiled(scope);
	};
}]);

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
     <h2>Display what's in foo and bar:</h2>
     <pre what-is-in-these="foo bar"></pre>
  </body>

</html>

/* Put your css in here */