$ scope. $ apply rendant le menu déroulant bizarre - angularjs

J'ai une liste déroulante;

<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-repeat="category in categories">{{category.name}}</option>
</select>

Ce qui fonctionne parfaitement. Cependant, je manipule la portée en dehors d'Angular (raison valable) et je l'utilise (c'est en coffeescript mais facile à comprendre)

scope.$apply (s) ->
s.units = _me.attr("data-units")
s.selected_category = parseInt(_me.attr("data-category"))

s.search(true,true)

Il apparaît de travailler dans ce tout en fonction de cela $scope.selected_category changements de variables (les produits / textes corrects apparaissent) mais la liste déroulante devient vide si j'ai "sélectionné" Select Category (IE: pas changé depuis ce changement) et reste le même si autre chose est sélectionné. En regardant la liste déroulante vide lorsque j'utilise l'inspecteur d'éléments en chrome, je peux voir ceci:

<option value="? number:31 ?"></option>

Qu'est-ce qui se passe avec ça?

Réponses:

Il semble que vous manquez le ng-selected attribuer sur option pour faire savoir à Angular quelle option est actuellement sélectionnée:

<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-selected="selected_category.id == category.id" data-ng-repeat="category in categories">{{category.name}}</option>
</select>

Cependant, il est préférable d'utiliser ng-options si vous n'avez pas besoin de faire quoi que ce soit à avancé. Donc, je recommande (comme @TheSharpieOne le mentionne dans les commentaires), que vous changez ceci:

 <select ng-model="selected_category" ng-options="c.name for c in categories">
<option value="">Select Category</option>
</select>

Si vous devez suivre par le id puis utilisez un track by clause:

 <select ng-model="selected_category" ng-options="c.name for c in categories track by c.id">
<option value="">Select Category</option>
</select>