Angular nested directives scope not shared

Question

I have my input directive which takes the input value from html, and updates the angular model:

.directive('input', function($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function(scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

Then I have my html which has the html value and angular model binded:

  <div ng-controller="form" class="form">
    <h2>Form with controller</h2>
    <input type="text" ng-model="item.example" value="defaultValue">
    <button ng-click="checkValue()">Check value</button>
  </div>

When I run the test as a controller it works perfectly:

.controller('form', function($scope) {
  $scope.item = {};
  $scope.checkValue = function() {
    console.log('checkValue', $scope.item);
  };
})

But as a nested directive it does not get the value:

.directive('form', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      scope.item = {};
      scope.checkValue = function() {
        console.log('checkValue', scope.item);
      };
    }
  };
})

My guess is that the directive scopes are separate, so one directive does not affect the other, however it works fine with the controller + directive?

I've tried changing the directive scopes using the suggestions here: Why are my AngularJS directives sharing scope?

.directive('input', function($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    scope: true,
    link: function(scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

But can't get the two directives to share the same scope. Is this possible?

Here is my demo showing the two approaches: https://jsfiddle.net/kmturley/L1bky0g0/1/