JS: AngularJS Equalise Height Directives. Relies on jQuery and jquery-resize. AMD Compatible.

EqualiseHeights.Directive.js

define(['angular'], function(angular){

	'use strict';

	/**
	 * Equalise Heights
	 * 
	 * @param string jQuery Selector of which to equalise
	 */
	angular.module('Directives')
		.directive('equaliseHeightsDir', [
			function(){
				return {
					scope: true,
					link: function(scope, element, attributes){
					
						//we're not using scope.watch here because, watch would require the values to change, and it can't watch browser events like window.resize, also we're not watching value changes, but events! therefore we're doing jquery event binding
						//another method here: http://jsfiddle.net/bY5qe/
						var items;
						attributes.$observe('equaliseHeightsDir', function(value){
							items = angular.element(value);
						});
						
						var equaliseHeight = function(){
							var maxHeight = 0;
							items
								.height('auto') //reset the heights to auto to see if the content pushes down to the same height
								.each(function(){
									//find out which has the max height (wrap it in angular.element, or else each this is the raw DOM)
									maxHeight = angular.element(this).height() > maxHeight ? angular.element(this).height() : maxHeight; 
								})
								.height(maxHeight); //then make them all the same maximum height!
						};
						
						//run it once
						equaliseHeight();
						
						//on the resize event from jquery, run a function, this function is a pointer!
						angular.element(window).resize(equaliseHeight);
					
					}
				};
			}
		]);

});

EqualiseHeightsTo.Directive.js

/*
	Equalises height of the current element to a target element.
	This uses the jquery-resize plugin along with jquery.
	It means the current element will always be bound the target element.
 */
define(['angular', 'jquery-resize'], function(angular){

	'use strict';

	angular.module('Directives')
		.directive('equaliseHeightToDir', [
			function(){
				return {
					scope: true,
					link: function(scope, element, attributes){

						var target;
						attributes.$observe('equaliseHeightToDir', function(value){
							target = angular.element(value);
						});

						var equaliseHeightToTarget = function(){
							element.height(target.height());
						};

						//bind to the element's resize
						angular.element(attributes.equaliseHeightToDir).resize(function(){
							equaliseHeightToTarget();
						});
					
					}
				};
			}
		]);

});

index.html

<article equalise-heights-dir="section > p">
	<section>
		<p>Blah blah blah. I will get the same height as my siblings!</p>
	</section>
	<section>
		<p>Blah blah blah. So will I!</p>
	</section>
	<section>
		<p>Blah blah blah.</p>
	</section>
	<section>
		<p>Blah blah blah.</p>
	</section>
</article>