title: Unable to bind data in angular 2
body: <p>I'm trying to bind <code>countries</code> data into my px-component which is a typeahead.</p>
  
  <p>Codepen link <a href="https://codepen.io/mailmrmanoj/pen/RLPZvy" rel="nofollow noreferrer">here</a>.</p>
  
  <p>On binding the data directly in html the typeahead is suggesting the list of countries. But when I try the same by passing data from class its not binding.</p>
  
  <pre><code>var AppComponent = ng
    .Component({
      selector: 'my-app'
    })
    .View({
      template: `&lt;div&gt; 
  &lt;h3&gt;Case 1 : Working dropdown:&lt;/h3&gt;
  &lt;px-typeahead placeholder="Enter your search query" local-candidates='["Alabama","Alaska","American Samoa","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District Of Columbia", "South Dakota","Tennessee","Texas","Utah","Vermont","Virgin Islands","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'&gt;&lt;/px-typeahead&gt; 
  &lt;br&gt;
  &lt;h3&gt;Case 2 : Not working dropdown if data is bind from controller:&lt;/h3&gt;
      &lt;px-typeahead placeholder="Enter your search query" local-candidates={{countries}}&gt;&lt;/px-typeahead&gt; 
  {{countries}}
      &lt;/div&gt;`
    })
    .Class({
      constructor: function() {      
         this.countries=["United States", "Antigua and/or Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan"]
      }
    });
  </code></pre>
  
  <p>Think the component <code>px-typeahead</code> is expecting the data in its attribute <code>local-candidates</code> to be an array with <code>''</code>.
  I tried different ways of binding <code>countries</code> like <code>{{countries}}</code>,<code>"countries"</code> etc.But didn't work.</p>