title: Wrapping angular typeAhead in separate directive
body: <p>My goal was to wrap angular-ui typeAhead directive into easily re-usable component, that could be used like this:</p>
  
  <pre><code>&lt;input my-person-lookup="myModel.personId" &gt;&lt;/input&gt;
  </code></pre>
  
  <p>I've achieve this by writing my custom directive, and specifying static template for typeahead. Here is <a href="http://plnkr.co/edit/O0lWHjtLPHssbw9Q52cD?p=preview" rel="nofollow">Plunker</a></p>
  
  <p>Now, I would like to build this template dynamically, and then compile it:</p>
  
  <pre><code>  var html = '&lt;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"&gt;&lt;/input&gt;';
    element.replaceWith($compile(html)(scope));
  </code></pre>
  
  <p>Unfortunately this approach didn't work <a href="http://plnkr.co/edit/ojGB8XqIseZgbYQFVxMe?p=preview" rel="nofollow">Plunker</a>.</p>
  
  <p>Could anyone tell me what I'm doing wrong?</p>