angularjs value on load incorrect

Question

See this plunk

I want to use an object model on an input (for interaction with the angularui bootstrap typeahead). It works perfectly when selecting something from the typeahead, but on load it displays [object Object] How can I get the input to display a property of the model object on load?

Answer 1

Just in case someone else landed here just like me, having a [object Object] being displayed in some input(s)...

In my case, I named the form element with the same name of the model property, like this:

<form name="contact">
   <input type="text" ng-model="contact.name" />
   <input type="text" ng-model="contact.email" />
</form>

Either change the form name to a different name, or change the model name.

As Angular populates the $scope with a property with the same name as the form, it overrides the model instance!