Angular Input default value

Nested directives seem to fail

by kmturley

HTML

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

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

JavaScript

angular.module('app', [])

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

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

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