Typeahead.js with angular ui-router

I have built a multi step form following this tutorial: http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router Everything is working well.

I now want to use Twitter's typeahead.js on those forms. So I need to make the typeahead call on the input being loaded with angular-ui-router.

I noticed angular-ui-router provides a onEnter callback that gets called when the state becomes active. Making the call to the typeahead function from in there doesn't seem to work, it seems the call is made before the view is loaded (not 100% sure of that).

How can I initialize typeahead on my input field loaded with angular-ui-router?

What I tried:

.state('questionnaire.relationship', {
  url: '/relationship',
  templateUrl: 'questionnaire/relationship.html',
  onEnter: function(){
    var relationshipList = ['brother', 'sister', 'father', 'mother'];
    var relationships = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: $.map(relationshipList, function(relationship) { return { name: relationship }; })
    });
    relationships.initialize();
    $('#bloodhound .typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'relationships',
      displayKey: 'name',## Heading ##
      source: relationships.ttAdapter()
    });
    alert('finished');
  }
})

When entering the questionnaire.relationship state, I see the alert popup before the view. Then the view with my input loads properly, but typeahead isn't working. There are no js error in the console.

I also made sure the typeahead call is working when used outside of angular-ui-router.