Why doesn't scope pass through properly to nested directives?

I havn'et got a clue as to what you're trying to do. However, your comment 'so I want all nested directives to be able to edit the top level model' indicates you want your directive to have scope of your controller. Use

transclude = true

in your directive so that your directives can have access to your the parent scope. http://docs.angularjs.org/guide/directive#creating-a-directive-that-wraps-other-elements

I don't know why you are doing it this way exactly, it seems like there should be a better way, but here goes a stab at getting your code working. First you create an isolated scope, so the scopes don't inherit or have access to anything but what is passed in the data attribute. Note that you can have your controller set dumbdata = ... and say <div data="dumbdata" and you will only have a data property on your isolated scope with the values from dumbdata from the parent in the data property. I usually try to use different names for the attribute and the data I'm passing to avoid confusion.

app.directive('project', function($compile) {
  return {
    template: '<div data="data"></div>',
    replace: true,
    scope: {
      data: '=' // problem
    },

Next, when you compile you are passing variables as scopes. You need to use real angular scopes. One way is to set scope: true on your directive definition, that will create a new child scope, but it will inherit from the parent.

app.directive('outer', function($compile) {
  var r = {
    restrict: 'A',
    scope: true, // new child scope inherits from parent
    compile: function compile(tEle, tAttr) {

A better way is probably to create the new child scope yourself with scope.$new(), and then you can add new child properties to pass for the descendants, avoiding the problem of passing values as scopes and still letting you have access to the individual values you're looping over (plunk):

app.directive('outer', function($compile) {
  var r = {
    restrict: 'A',
    compile: function compile(tEle, tAttr) {
      return function postLink(scope,ele,attrs) {
        angular.forEach(scope.outer.middles, function(v, i) {
          var x = angular.element('<div middle></div>');
          var s = scope.$new(); // new child scope
          s.middle = v; // value to be used by child directive
          var y = $compile(x)(s); // compile using real angular scope
          ele.append(y);
        });
      };
    }
  };
  return r;
});