ng-options with array of objects in angularjs -

i see number of references variations of i'm seeing on net can't seem find actual solution. i'm trying existing set of data populate select list using angularjs. can work problematic results.

my dataset array populated earlier different directive consists of list of javascript object instances. (i created objects represent doctrine entities , populate them json data)

var listtypemodel = function(data) {     var dataisobj = (typeof(data) == "object");     this.listtypeid   = (dataisobj && (data.listtypeid > 0))                   ? data.listtypeid   : null;     this.listtypename = (dataisobj && (typeof(data.listtypename) == "string")) ? data.listtypename : null;      // alias functions     this.getid   = function() { return this.listtypeid; }     this.getname = function() { return this.listtypename; } };  function grouptypes(indata) {     var grouped = [];     for(var type in indata) {         var gtype = new listtypemodel(indata[type]);         grouped.push(gtype);     }     return grouped; } 

i retrieve info when drawing upper part of tree menu in main controller:

// run @ startup $http.get("<?= $this->basepath(); ?>/json/listtypes") .success(     function (response) {         $scope.types = grouptypes(response.types); // grouplists(response);     } ); 

since want re-use select menu, pass 'types' variable down tree through scope until gets pop-up edit directive.

<script type="text/ng-template" id="listedit.html">     <div class="panel panel-default" style="width:300px;" ng-show="showlistedit">         <div class="panel-heading" ng-show="(currentlist.listid > 0)">             id: {{ currentlist.listid  }}             <input type="hidden" ng-model="listform.listid " ngdisabled="!(currentlist.listid  > 0)" />         </div>         <div class="panel-body">             <label for="listname">name</label>             <input name="listname"  type="text" ng-model="listform.name" />             <br />             <label for="listtypeid">type {{types}}</label>             <select ng-model="listform.typeid">                 <option ng-selected="listtype.getid() == listform.typeid" ng-repeat="listtype in types" value="{{listtype.getid()}}">{{listtype.getname()}}</option>             </select>         </div>         <span ng-click="savelist()">[save]</span>     </div> </script>      .directive(         'listedit',         function($http) {             return {                 restrict: 'ea',                 replace: true,                 scope: {                     currenttype: '=',                     currentlist: '=',                     showlistedit: '=',                     types: '='                 },                 templateurl: 'listedit.html',                 link: function (scope, element, attrs) {                     scope.listform = {                         listid : scope.currentlist.listid,                         name   : scope.currentlist.listname,                         typeid : scope.currentlist.listtypeid                     };                     scope.savelist = function () {                         alert('in savelist');                         var postdata = $.param({                             listid       : scope.listform.listid,                             listname     : scope.listform.name,                             listtypeid   : scope.listform.typeid                         });                         $http({                             url: '<?= $this->basepath(); ?>/json/lists/save',                             method: 'post',                             data: postdata,                             headers: { 'content-type': 'application/x-www-form-urlencoded' }                         })                             .success(function (data, status, headers, config) {                                 alert('savelist success');                             })                             .error(function (data, status, headers, config) {                                 alert('savelist failure');                             });                     }                 }             }         }) 

i have tried removing tag , using ng-options="listtype.listtypeid listtype.listtypename listtype in types" within select tag.

whenever use option tag ng-repeat, 2 blanks @ top of select list:

<option value="? number:1 ?"></option> <option value="? undefined:undefined ?"></option> 

whenever use ng-options, list shows twice duplicates of items in array. saw @ least 1 post on duplicates ng-options saying running $compile cause compile twice, have no compile in directive.

i need know how angularjs build select list without duplicates , without blanks.

here variables seen in console.log() output in chrome:

types seen in javascript console: [listtypemodel, listtypemodel, listtypemodel]   0: listtypemodel     $$hashkey: "object:3"     listtypeid: 1     listtypename: "materials"     getid: function () { return this.listtypeid; }     getname: function () { return this.listtypename; }     __proto__: listtypemodel   1: listtypemodel     $$hashkey: "object:4"     listtypeid: 2     listtypename: "material collection list"     getid: function () { return this.listtypeid; }     getname: function () { return this.listtypename; }     __proto__: listtypemodel   2: listtypemodel     $$hashkey: "object:5"     listtypeid: 3     listtypename: "material collection"     getid: function () { return this.listtypeid; }     getname: function () { return this.listtypename; }     __proto__: listtypemodel   length: 3   __proto__: array[0]   listform seen in console.log   object {listid: 1, name: "all materials", typeid: 1} 

after considerable tinkering, started become suspicious might have way directive elements nested in tree structure. 1 of things playing accessing templatecache directly pull content , append when tree have content under it's current branch.

i.e. listtype branches down lists match type. list has array of listitems. listitems can have listitemoptions. if reason type didn't match define lists, list didn't yet have items in or item had no options associated it, didn't see reason include code allow expand branches further, used conditional in link followed compile call.

e.g.

if (angular.isarray(scope.currentitem.itemoptions)) {     element.append($templatecache.get('itemfunc.html'));     $compile(element.contents())(scope) } 

i'm not sure if compiles nested further down tree or fact dropping in item out of template cache, when included content directly in layer, strange behaviors went away.

so guess i'll hide them ng-show condition instead.