bs-tooltip restricts two way data binding

Question

I am trying a simple code with angular strap's bootstrap tooltip. I am seeing that AngularJs data binding is not working when bs-tooltip is used.

Bind not working

<input type="text" ng-model="name1" data-trigger="focus" data-type="success" data-title="something" bs-tooltip> {{ name1 }}

Bind works

<input type="text" ng-model="name"> {{ name }}

Plunker demo

Am I missing something?

Answer 1

Sounds like angular-strap creates a child scope for the input control, but {{name1}} is located to its parent scope. If you inspect the HTML, you will see ng-scope in class, while the second input control does not.

<input type="text" ng-model="$parent.name1"
   data-trigger="focus" data-type="success" data-title="something" bs-tooltip="" 
   class="ng-valid ng-scope ng-touched ng-dirty ng-valid-parse">

My simple solution is to add a $parent. prefix to the variable. It works as

<input type="text" ng-model="$parent.name1" 
   data-trigger="focus" data-type="success" data-title="something" bs-tooltip> {{ name1 }}