directive with nested directive and repeat not rendering - angularjs

Question

I have 2 directives, one of them is recursive and the other renders a form with a select option. Everything appears to be working, but the select box is empty in the ui but the angular comment is inside of the inspection. I have tried to compile the result in multiple way but I cannot get the options to appear. The options are in a repeat and I think that is what is causing it. Here are my 2 directives. Thanks for the help.
select options
angular.module('myApp').directive("typesControl",function($compile,$timeout){
return {
replace: true
//THESE OPTIONS DO NOT SHOW UP IN THIS SELECT
,template: '<select name="name" class="form-control"><option ng-repeat="type in design.types" ng-selected="{{type.id == content.partid}}">{{type.name}}</option></select>'
,compile: function (element, link) {
var contents = element.contents().remove();
var compiledContents;
return {
pre: function (scope, element) {
}
,post: function (scope, element) {
if (!compiledContents) {
compiledContents = $compile(contents);
}
compiledContents(scope, function (clone) {
element.append(clone);
});
element.change(function () {
var val = $(this).find('option:selected').val();
var $form = $(this).closest('form');
var $row = $(this).closest('.row');
var $container = $form.find('.formtemplate');
var tpl = '';
//THESE INPUTS DO RENDER
tpl += '<div><input type="text" name="ids" placeholder="ids" class="form-control" value="{{content.ids}}"></div>';
tpl += '<div><input type="text" name="classes" placeholder="classes" class="form-control" value="{{content.classes}}"></div>';
switch (val) {
case 'Partial':
tpl += '<select name="content" class="form-control"><option ng-repeat="link in links" ng-selected="{{link.url == content.content}}">{{link.url}}</option></select>';
break;
case 'View':
break;
case 'Source':
break;
}
element.removeAttr('types-control');
$container.empty().append(tpl);
$compile($container)(scope);
if (!scope.$$phase) {
scope.$apply();
}
});
$timeout(function () {
element.trigger('change');
});
}
};
}
}
});
recursive directive
angular.module('myApp').directive("tree", function($compile,$timeout) {
return {
scope: {family: '='}
,template:
'<div class="row" ng-repeat="content in family | orderObjectBy:\'orderby\':false" style="margin-top: 25px;">'+
'<div class="col-lg-6">'+
'<form class="simple-form">'+
'<div types-control ></div>'+
'<div class="formtemplate"></div>'+
'<button ng-click="newcontent(content.id)" type="submit" class="btn btn-success glyphicon glyphicon-plus"></button>'+
'<button ng-click="deletecontent(content.id)" type="submit" class="btn btn-danger glyphicon glyphicon-minus"></button>'+
'</form>'+
'</div>'+
'<div tree family="content.children"></div>'+
'</div>'
,compile: function(element, link){
var contents = element.contents().remove();
var compiledContents;
return {
pre: function(scope, element){
}
,post: function(scope, element){
if(!compiledContents){
compiledContents = $compile(contents);
}
compiledContents(scope, function(clone){
element.append(clone);
});
}
};
}
};
});
EDIT: I created this Plunker which shows the problem with the select boxes.

Answer 1

Just in case someone else runs into this problem, it is related to the scope. Using scope inside a directive the way that I am passing family in creates an isolated scope. This means that you have to pass the other variables in using attributes. Working Plunker
scope: {
family: '='
,links: '='
,types: '='
}