Wrapping angular typeAhead in separate directive

Question

My goal was to wrap angular-ui typeAhead directive into easily re-usable component, that could be used like this:

<input my-person-lookup="myModel.personId" ></input>

I've achieve this by writing my custom directive, and specifying static template for typeahead. Here is Plunker

Now, I would like to build this template dynamically, and then compile it:

  var html = '<input type="text" ng-model="directiveModel.selectedPerson" typeahead=" p as p.name for p in people" typeahead-min-length="1" typeahead-wait-ms="200" typeahead-editable="false" placeholder="type p"></input>';
  element.replaceWith($compile(html)(scope));

Unfortunately this approach didn't work Plunker.

Could anyone tell me what I'm doing wrong?

Answer 1

Just move your data to the wrapping controller and remove your isolated scope.

Plunker

Plunker2