Tooltip issue in angularjs

Question

I want dynamic text tool tip for input box and i have used bootstrap 3.1.1 here with angularjs 1.2.16
but i am getting value as undefined through ng-model of input box.

HTML

    <div class="input-group">
        <input type="text" class="form-control input-sm" ng-model="searchColumnOfDatagridQuery1" placeholder="Search {{columnData[0].text.toLowerCase()}} here" tooltip="Search {{columnData[0].text.toLowerCase()}} here" tooltip-trigger="mouseenter" tooltip-placement="bottom" tooltip-append-to-body="true">
                    <span class="input-group-btn">
                            <button class="btn btn-default btn-sm" type="button" ng-click="searchColumnOfDatagrid(searchColumnOfDatagridQuery1,1)"><span class="glyphicon glyphicon-search"></span></button>
                    </span>  
    </div>  

JSFiddle I have update my code here

Can any one tell me why i am not getting ng-model value here and how to resolve this issue?
How to get ng-model value of text-box because on click of button i am getting undefined value?

Answer 1

$.parent.Whatevermodel property you have is the solution. Please check following plunkr, it is working for me.

http://plnkr.co/edit/cnm0pGYXBHda4I5hpYYi?p=preview

Upvote and accept it as answer if it helps:)

Answer 2

I've found workaround for this here

you can change value of your ng-model attribute from searchColumnOfDatagridQuery1 to: $parent.searchColumnOfDatagridQuery1 and it should works just fine.