Angular directive add template on textbox (enter of Spacebar)
<p>I am using angular js,My target is to show a html table on (enter of spacebar) in textbox and add the element of the table in that textbox,for that i have written a directive,but i am not sure whether i have done it in right path..Ohk i will show it in detail to be more clear</p>

<p>Here is my html textbox</p>

<pre><code>&lt;input type="text" helps ng-model="firstText" code="1"&gt;
&lt;div class="col-xs-4 pull-right" helps  donotapply=true&gt;&lt;/div&gt; //Do i need this??
</code></pre>

<p>Here <code>helps</code> is my directive which binds my html to the div,here is my directive code</p>

<pre><code>app.directive('helps', ['$parse', '$http','$filter', function ($parse, $http,$filter) {
    return {
        restrict: 'AE',
        scope: true,
        templateUrl: 'Table.html',
        link: function (scope, element, attr) {
            console.log(element);
            element.bind("keypress", function (event) {
                    if (event.which === 114 || event.which === 32) {

                        scope.enterMe = function () { // this is to add data to Table

                                scope.newArray = [
                                       {'code' :1,'name' : 'name1','age' : 24},
                                       {'code' : 2,'name' : 'name2','age' : 26},
                                       {'code' : 3,'name' : 'name3','age' : 25}
                                    ]
                            };

                        scope.setElement = function (element) {  // Here set element function is to add my table name to textbox
                            var modelValue = tempattr.ngModel + '_value';
                            var model = $parse(tempattr.ngModel);
                            model.assign(scope, element.name);
                            modelValue = tempattr.ngModel + '_value';
                            modelValue = $parse(modelValue);
                            modelValue.assign(scope, element.code);
                        };
                    }
                }
            });
        }

    }
}]);
</code></pre>

<p>And Now here my Table.html</p>

<pre><code>&lt;div class="col-xs-4 pull-right" ng-show="hideMyMtHelpDiv"&gt;
    &lt;input type="text" ng-model="searchText" placeholder="search"&gt;
    &lt;input type="button" ng-model="gad" value="GO" ng-click="enterMe();"&gt;
    &lt;table ng-show="getTableValue" class="table table-bordered table-responsive table-hover add-lineheight table_scroll"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Code
                &lt;/td&gt;
                &lt;td&gt;
                    Name
                &lt;/td&gt;
                &lt;td&gt;
                    Age
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr ng-repeat="test in newArray" ng-dblclick="setElement(test);"&gt;
                &lt;td&gt;
                    {{test.code}}
                &lt;/td&gt;
                &lt;td&gt;
                    {{test.name}}
                &lt;/td&gt;
                &lt;td&gt;
                    {{test.age}}
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>Now my question is that, my table is binded with my div as well as my input textbox; So, is there any proper way to do this? </p>

<p>If my question is still unclear kindly comment.
Thank you for any help</p>

<p>Check my plunker here <a href="https://plnkr.co/edit/lAUyvYKp1weg69CsC2lg?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/lAUyvYKp1weg69CsC2lg?p=preview</a>
and read README</p>