Directive for custom fields in form [scope is not updating]

Question

I am trying to create a directive for custom fields in the form. I am able to create directive but not able to update scope.

See Plunker demo for more idea about problem

Issue I am facing is when I am submitting the form I am getting a value of custom field ng-model is null or undefined. because Two Way Binding is not working

you will see when we update scope from the parent it will update directive scope but when you will update it in a custom field it will not update input field which is using parent scope and after that two way binding will not work

Here are my files

users.html

<custom-field ng-repeat="(key,field) in custom_fields" form="userForm" ng-model="user.custom_field[field.id]" fielddata="field"></custom-field>

app.js

app.directive('customField', function () {
    var directive = {};
    directive.restrict = 'E';
    directive.templateUrl = 'app/modules/custom_fields/views/custom_field_directive.html';
    directive.scope = {
        ngModel: "=",
        mydata: "<fielddata",
        form: "<"
    }

    return directive;
});

custom_field_directive.html

<div layout="row" layout-xs="column">
    <div flex >
        <!-- Custom input field html [Required Field]  -->
        <md-input-container class="md-block" ng-if="mydata.type == 'input' && mydata.is_required==1">
            <label>{{mydata.field_name}}</label>
            <input name="{{mydata.slug}}" ng-model="ngModel" ng-required="!ngModel"> 
            <div ng-messages="form[''+mydata.slug+''].$error" ng-show="form[''+mydata.slug+''].$touched" role="alert">
                <div ng-message="required">
                    <span>{{mydata.field_name}} is required</span>
                </div>
            </div>
        </md-input-container>
        <!-- Custom input field html  -->
        <md-input-container class="md-block" ng-if="mydata.type == 'input' && mydata.is_required==0">
            <label>{{mydata.field_name}}</label>
            <input name="phone" ng-model="ngModel"> 
        </md-input-container>
    </div>
</div>

Function for getting custom fields values from database UsersController.js

$scope.getCustomFields = function (id = "") {
        $rootScope.loader = true;
        $http.post(site_settings.api_url + 'get_custom_fields_admin_user', {id: id})
                .then(function (response) {
                    $scope.custom_fields = response.data;
                    angular.forEach($scope.custom_fields, function (value, key) {
                        if (value.field_values) {
                            $scope.user.custom_field[value.id] = value.field_values.value;
                            console.log("in");
                        } else {
                            $scope.user.custom_field[value.id] = null;
                        }
                    });
                    $rootScope.loader = false;
                }).catch(function (error) {
            $rootScope.message = 'Something Went Wrong.';
            $rootScope.$emit("notification");
            $rootScope.loader = false;
        });
    }

Here is my user model which I get at submitting form

Demo

Plunker

Answer 1

Regarding your answer @jack.

The child scope is created by ngIf.

You can use ngShow ngHide or ngWhen instead and solve the scoping problem.

Generally, you should avoid calling $parent as much as you can.

Whenever you come across a situation where $parent fixes the problem, it most probably a problem with your scope or a wrong design

You can see about ngIf scope in the docs

here is the relevant part: