An Angular directive that converts ngModel attributes to dot notation so nested properties will bind correctly, even if they did not previously exist.

ngModelCreate

  // convert `ng-model="foo[bar.key][baz.key]"` to `ng-model="foo.barKey.bazKey"`
  // which will allow the ng-model directive to auto-generate the nested structure.
  .directive('ngModelCreate', function(_){

    function makeDotPath(scope, expr) {
      var pathParts = _.compact(expr.split(/\[|\]/g))
      var convertedParts = _.map(pathParts, function(part, i) {
        if (i === 0) return part
        if (part[0] === '.') return part.substr(1)
        return scope.$eval(part)
      })
      return convertedParts.join('.')
    }

    return {
      restrict: 'A',
      priority: 2, // compile before ngModel
      scope: true,
      controller: function($scope, $attrs, $element) {
        var expression = $scope.expression = $scope.expression || $attrs.ngModel
        var dotPath = makeDotPath($scope.$parent, expression)
        $element.attr('ng-model', $attrs.ngModel = dotPath)
      }
    }

  })