The value of the angular load on the load is incorrect

Question

See plunk

I want to use the object model on input (to interact with angularui bootstrap typeahead). It works great when choosing something from the type, but when loading it displays [object Object] How can I get input to display the properties of the model object at boot time?

Answer 1

It turns out there is currently a bug in ui-bootstrap that has been fixed by the wizard and will be released soon. I also misunderstood the ui-bootstrap build files and included both templated and non-templated versions in my application.

I monkey paid my ui-bootstrap and switched only to templates, and now it works for me.

see google group discussion

Answer 2

Just in case, someone landed here, like me, having a [object Object] displayed on some inputs ...

In my case, I named the form element with the same model property name, for example:

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

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

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

Answer 3

I came across this too, and docs don't show how to connect to boottrap updater .

I did this by setting the initial value to a string. When you enter in the model field there will be a line. When you select from the drop-down list, it will be an object

 app.controller('MainCtrl', function($scope) { $scope.data = [{id:1,name:"google"}, {id:2, name:"microsoft"}]; $scope.selected = ''; $scope.$watch('selected',function(newVal,oldVal){ if(newVal && angular.isObject($scope.selected)){ console.log($scope.selected) } }) }); 

Plunker

This may be the best way to use directive attributes, but not sure what it is

Answer 4

Angularjs form showing [Object] when loaded into form fields

This only happens if your form name and ng-model name (value) are the same