use a directive to handle recursive behavior

src/main/webapp/directives/category.html

@@ -1,24 +1,40 @@
-<li> <input type="checkbox" ng-model="node.expanded" ng-click="toggleCategory(node)" /> 
+<li>
+	<input type="checkbox" ng-model="node.expanded"
+		ng-click="toggleCategory(node)" />
 	<label ng-click="categoryClick({id: node.id})"
-		   ng-class="{selected: (node.id == selectedId && selectedType == 'category'), unread: unreadCount({category:node})}">{{formatCategoryName({category:node})}}
+		ng-class="{selected: (node.id == selectedId && selectedType == 'category'), unread: unreadCount({category:node})}">{{formatCategoryName({category:node})}}
 	</label>
 	<ul>
-		<li ng-repeat="feed in node.feeds" ng-mouseenter="hovered=feed" ng-mouseleave="hovered=null" ng-class="{error: feed.message && feed.errorCount > 10}">
+		<recursive>
+			<category ng-repeat="child in node.children"
+				node="child" feed-click="feedClick({id:id})"
+				category-click="categoryClick({id:id})" selected-type="selectedType"
+				selected-id="selectedId"
+				format-category-name="formatCategoryName({category:category})"
+				format-feed-name="formatFeedName({feed:feed})"
+				unread-count="unreadCount({category:category})"> 
+			</category> 
+		</recursive>
+		<li ng-repeat="feed in node.feeds" ng-mouseenter="hovered=feed"
+			ng-mouseleave="hovered=null"
+			ng-class="{error: feed.message && feed.errorCount > 10}">
 			<div class="dropdown pull-right">
-				<a dropdown-toggle class="pull-right"><i ng-show="hovered==feed" class="icon icon-chevron-down"></i> </a>
+				<a dropdown-toggle class="pull-right">
+					<i ng-show="hovered==feed" class="icon icon-chevron-down"></i>
+				</a>
 				<ul class="dropdown-menu">
 					<li>
-				    	<a ng-click="rename(feed)">Rename</a>
+						<a ng-click="rename(feed)">Rename</a>
-				    </li>
+					</li>
-				    <li>
+					<li>
-				    	<a ng-click="unsubscribe(feed)">Unsubscribe</a>
+						<a ng-click="unsubscribe(feed)">Unsubscribe</a>
-				    </li>
+					</li>
-			  	</ul>
+				</ul>
-		  	</div>
+			</div>
-		  	<a ng-click="feedClick({id: feed.id})" class="feed-link"
+			<a ng-click="feedClick({id: feed.id})" class="feed-link"
-			   ng-class="{selected: (feed.id == selectedId && selectedType == 'feed'), unread: feed.unread }">
+				ng-class="{selected: (feed.id == selectedId && selectedType == 'feed'), unread: feed.unread }">
-			   <favicon url="feed.feedUrl" />
+				<favicon url="feed.feedUrl" />
-			   {{formatFeedName({feed:feed})}}
+				{{formatFeedName({feed:feed})}}
 			</a>
 		</li>
 	</ul>

src/main/webapp/js/controllers.js

@@ -117,17 +117,17 @@ module.controller('CategoryTreeCtrl', function($scope, $timeout, $stateParams,
 		}
 		return count;
 	};
-	
+
 	var rootUnreadCount = function() {
 		return $scope.unreadCount($scope.SubscriptionService.subscriptions);
 	};
-	
+
 	$scope.$watch(rootUnreadCount, function(value) {
 		var label = 'CommaFeed';
 		if (value > 0) {
 			label = value + ' - ' + label;
 		}
-		$window.document.title = label; 
+		$window.document.title = label;
 	});
 
 	$scope.formatCategoryName = function(category) {
@@ -349,7 +349,7 @@ module.controller('FeedListCtrl', function($scope, $stateParams, $http, $route,
 			} else {
 				$scope.isOpen = !$scope.isOpen;
 			}
-			if($scope.isOpen) {
+			if ($scope.isOpen) {
 				$scope.mark(entry, true);
 			}
 			$scope.current = entry;
@@ -423,7 +423,7 @@ module.controller('FeedListCtrl', function($scope, $stateParams, $http, $route,
 			openPreviousEntry(e);
 		});
 	});
-	
+
 	$scope.$on('markAll', function(event, args) {
 		EntryService.mark({
 			type : $scope.selectedType,

src/main/webapp/js/directives.js

@@ -27,7 +27,7 @@ module.directive('scrollTo', function($timeout) {
 		restrict : 'A',
 		link : function(scope, element, attrs) {
 			scope.$watch(attrs.scrollTo, function(value) {
-				if (!value) 
+				if (!value)
 					return;
 				$timeout(function() {
 					var docTop = $(window).scrollTop();
@@ -52,6 +52,25 @@ module.directive('scrollTo', function($timeout) {
 	};
 });
 
+module.directive('recursive', function($compile) {
+	return {
+		restrict : 'E',
+		priority : 100000,
+		compile : function(tElement, tAttr) {
+			var contents = tElement.contents().remove();
+			var compiledContents;
+			return function(scope, iElement, iAttr) {
+				if (!compiledContents) {
+					compiledContents = $compile(contents);
+				}
+				iElement.append(compiledContents(scope, function(clone) {
+					return clone;
+				}));
+			};
+		}
+	};
+});
+
 module.directive('category', function($compile) {
 	return {
 		scope : {
@@ -67,16 +86,6 @@ module.directive('category', function($compile) {
 		restrict : 'E',
 		replace : true,
 		templateUrl : 'directives/category.html',
-		link : function(scope, element) {
-			var ul = element.find('ul');
-			var html = '<category ng-repeat="child in node.children" node="child" feed-click="feedClick({id:id})" ';
-			html = html + 'category-click="categoryClick({id:id})" selected-type="selectedType" selected-id="selectedId" ';
-			html = html + 'format-category-name="formatCategoryName({category:category})" format-feed-name="formatFeedName({feed:feed})" ';
-			html = html + 'unread-count="unreadCount({category:category})">';
-			html = html + '</category>';
-			ul.prepend(html);
-			$compile(ul.contents())(scope);
-		},
 		controller : function($scope, $dialog, SubscriptionService) {
 			$scope.unsubscribe = function(subscription) {
 				var title = 'Unsubscribe';