Debugging the output of $viewValue for angular bootstrap

Question

Is there a way to output and find out what view value is in the handlebar templates?

I've tried attaching view value as a test directive like so:

<div data-test="{{$viewValue}}">test</div>
<div data-test="{{viewValue}}">test</div>

But i end up with

<div data-test>test:</div>

I'm using $viewValue here to filter it in my bootstrap typeahead example but it's not working. It doesn't filter at all and i'm getting all 1000 results.

E.g.

<input type="text" ng-model="customSelected" uib-typeahead="state as state.name for state in statesWithFlags | filter:{$viewValue}" class="form-control">

Answer 1

To access $viewValue you need to reference the input from the form, e.g:

<form name="myForm">
  <input type="text" name="myInput" ng-model="username">
  View Value = {{myForm.myInput.$viewValue}}
</form>