How to make one form but can use with two necessity (Angular JS)

Question

I have a problem. Not much different with templating angularjs. But im still confused. I have made one form and used in two necessity. The necessity is update form and add form. If heading update data(update form), The result is expected as i want. But, if heading add data(add form) is not working. The problem is I call $scope.label--> just example. The result is undefined, I dont know how. But if in update data(update form) is correct and good. Any solution for me ? or my logic templating is wrong ? How should I do to solve my problem ? Thanks

And this is my code :

FORM.HTML (Partial My Template)

<div class="row">
    <div class="col-md-12">
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-edit font-pink-sharp"></i>
                    <span class="caption-subject font-pink-sharp bold uppercase">
                        Form Editable
                    </span>
                </div>
            </div>
            <div class="portlet-body form">
                <div class="form-horizontal">
                    <div class="form-body">

                        <div ng-include="GetDataForm()"></div>
                </div>
            </div>
        </div>
    </div>
</div>

FORM TRENDING TAG HTML

<div class="form-group" ng-show="showId">
    <label class="control-label col-md-3">ID Trending Tag</label>
    <div class="col-md-6">
        <input type="text" name="id" class="form-control" ng-model="id" disabled></input>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3">Label</label>
    <div class="col-md-6">
        <input type="text" name="label" class="form-control" ng-model="label"></input>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3">Active</label>
    <div class="col-md-6">
        <label class="checkbox-inline">
            <input type="checkbox" ng-model="active0.type.checked"> 0
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" ng-model="active1.type.checked"> 1
        </label>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3">Slot</label>
    <div class="col-xs-1">
        <input type="text" name="username" class="form-control" ng-model="slot"></input>
    </div>
</div>
<input type="hidden" name="userfile" file-model="userfile"></input>
<div class="form-group">
    <label class="control-label col-md-3">URL</label>
    <div class="col-md-6">
        <input type="text" name="url" class="form-control" ng-model="url"></input>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3">Target</label>
    <div class="col-md-6">
        <input type="text" name="target" class="form-control" ng-model="target"></input>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3">Tracker</label>
    <div class="col-md-6">
        <input type="text" name="target" class="form-control" ng-model="tracker"></input>
    </div>
</div>
<div class="form-actions">
    <div class="row">
        <div class="col-md-offset-8 col-md-3">
            <button type="submit" class="btn pink" ng-click="UpdateTrendingTag()" ng-show="showButton">Update</button>
            <button type="submit" class="btn pink" ng-click="SaveTrendingTag()" ng-hide="showButton">Save</button>

            <button type="button" class="btn default">Cancel</button>
        </div>
    </div>
</div>

Controller Update Form

$scope.getDataTrendingTag = function (data){

        $scope.showId = false;
        $scope.showId = !$scope.showId;

        $scope.showButton = false;
        $scope.showButton = !$scope.showButton;

        $scope.getInclude = function() {
            return 'templates/form.html';
        };

        $scope.GetDataForm = function() {
            return 'templates/form-trending-tag.html';
        };

};

Controller Adding Form

$scope.CreateTrendingTag = function() {

        $scope.showId = true;
        $scope.showId = !$scope.showId;

        $scope.showButton = true;
        $scope.showButton = !$scope.showButton;

        $scope.getInclude = function() {
            return 'templates/form.html';
        };

        $scope.GetDataForm = function() {
            $scope.label = "";
            $scope.active0 = {
                type: {
                    checked: false
                }
            };

            $scope.active1 = {
                type: {
                    checked: false
                }
            };
            $scope.slot = "";
            $scope.url = "";
            $scope.target = "";
            $scope.tracker = "";

            return 'templates/form-trending-tag.html';
        };
    };

Answer 1

This happens because when using ng-include there is a new Child Scope created

What you can do is:

1) Use an object instead of $scope.label you could do $scope.data = {} and then set the ng-model to data.label

Fiddle with object

2) Use $parent (not so recommended)

like this ng-model="$parent.label"

Fiddle with parent

If You have ng-include in an ng-include You need $parent.$parent.label

Hope this helps

You can read here about Scope and ng-incluce Ng-Include and Scope

Regards