ng-model not reflecting value selected through typeahead input

I am trying to bind the value selected using typeahead to a scope variable. I would like to read its value through the variable and may be reset it conditionally too. But I am not able to get it working. The model variable never seems to reflect changes that occur in the typeahead input box.

HTML:

<div ng-controller="SearchBoxController">
    Model: {{selection|json}}
    <div id="multiple-datasets">
        <input class="typeahead" type="text" placeholder="Enter search query" ng-model="selection.query">
    </div>
</div>

Javascript:

var app = angular.module('myApp', ['siyfion.sfTypeahead']);
app.controller('SearchBoxController', function($scope) {

$scope.selection = {};
  $('#multiple-datasets .typeahead').typeahead({
    highlight: true
   },
   {
    name: 'phrase-suggest',
    display: 'phrase',
    source: phrases
  },
   {
    name: 'tag-suggest',
    display: 'tag',
    source: tags,
    templates: {
        header: '<h3 class="title-tag">Tags</h3>'
    }
  },
  {
   name: 'folder-suggest',
   display: 'folder',
   source: folders,
   templates: {
     header: '<h3 class="title-folder">Folders</h3>'
   }
 }).on('typeahead:selected', function(event, selection) {

  // the second argument has the info you want
  console.log   (selection);
  if(typeof selection.tag != 'undefined' || typeof selection.folder != 'undefined') $scope.selection.query = null;  
  // clearing the selection requires a typeahead method
  // $(this).typeahead('setQuery', '');
});;

Here is the plunker to my code.